a标签只能点击一次/a标签点击一次后失效

最新推荐文章于 2024-10-25 10:09:14 发布

原创最新推荐文章于 2024-10-25 10:09:14 发布 · 置顶 · 1.3w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#a标签只能点击一次 #a标签点击一次后失效 #让谷歌火狐识别a标签的disabled点

js 同时被 3 个专栏收录

29 篇文章

订阅专栏

java

27 篇文章

订阅专栏

html

20 篇文章

订阅专栏

本文分享了解决微信前端中a标签点击一次后出现重复二级目录的问题，通过JavaScript方法使a标签置灰，实现点击限制。同时介绍了如何在不同浏览器下兼容并实现在手机端的一级目录点击后，二级目录正确显示的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好：

在使用Spring MVC 后，做微信前端，真是各种的坑啊！今天用了一天解决了a标签点击一次后失效/ a标签只能点击一次的问题！保存一下，也给大家分享一下吧!

项目需求：

一级目录后如果有二级目录，点击一级目录二级目录显示！

一级目录后没有二级目录直接跳转页面

今天悲催的一个问题是:

连续点击a标签后，手机端就出现重复的二级目录

$("#yijimulu"+number).attr("disabled",true); 这个方法

好不容易整出效果来了，却只有360浏览器识别，火狐，谷歌等浏览器都不认，更别说微信前端了，，

经过我不断的测试终于出来了自己想要的结果！

window.document.getElementById('yijimulu'+number).disabled="disabled";//使a标签置灰，只能操作一次
document.getElementById('yijimulu'+number).onclick="";

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/view/common/tags.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>选择科室列表</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<%@ include file="/view/common/resource.jsp"%>
	</head>
	<body>
	<div>
	<input type="hidden" id="pName" name="PName" value=""/>
	<input type="hidden" id="number" name="number" value=""/>
	<input type="hidden" id="dayTime" name="dayTime" value="${dayTime}"/>
	<input type="hidden" id="timeFlg" name="timeFlg" value="${timeFlg}"/>
	</div>
	 <div class="container">
        <ul class="section_list">
	<!-- 一级目录 -->
			<c:forEach items="${entity}" var="entity" begin="0" varStatus="stat">
				<input type="hidden" id="p_fdid" name="p_fdid" value="${entity.fdid}"/>
				<input type="hidden" id="p_pid" name="p_pid" value="${entity.pid}"/>
				<input type="hidden" id="hospId" name="hospId" value="${entity.hospId}"/>
			 <li><a <span style="color:#CC0000;">id="yijimulu${stat.count}"</span> <span style="color:#3333FF;">onclick</span>="show('${entity.fdid}','${entity.hospId}','${entity.name}','${stat.count}')">${entity.name}</a><i class="icon_arrow"></i></li>
			  <ul class="child_ul" id="div${stat.count}">
              </ul>
			</c:forEach>
		</ul>
    </div>
<script type="text/javascript">
<!--二级目录 方法实现 -->
	function show(fdid,hospId,name,number){
		$("#div"+number).empty();
		var name =name;		//一级科室名称 
		var pid = fdid;	 //obj 当前科室的fdID作二级目录的Pid 
		var hospId = hospId;	//医院ID 
		var number = number;	//编号标记  
		$("#pName").val(name);//一级目录 
		$("#number").val(number);//编号 
		$.post(_path+"/front/mobile/wx/wxHospDeptController",
	       {
			"pid" : pid,
			"hospId" : hospId
			},
	     function(data){
			//拼接Html
 			if(data.entity!=null){	//当存在二级目录的时候,循环显示二级目录 
			var	pName = $("#pName").val(); 
			var number =$("#number").val();
			$("#div"+number).show();
 				for(var i = 0; i<data.entity.length;i++ ){
 					$("#div"+number).append("<input type='hidden' id='fdid' name='fdid' value='"+data.entity[i].fdid+"'></input>"
 			 				+"<input type='hidden' id='pid' name='pid' value='"+data.entity[i].pid+"'></input>"
 			 				+"<input type='hidden' id='hospId' name='hospId' value='"+data.entity[i].hospId+"'></input>"
 			 				+"<li><a class='child_list_a'  onclick=twoDirectory('"+data.entity[i].fdid+"','"+data.entity[i].name+"')>"+data.entity[i].name+"</a></li>"
 							);
 				}
				<span style="color:#FF0000;">window.document.getElementById('yijimulu'+number).disabled="disabled";//使a标签置灰，只能操作一次 
				document.getElementById('yijimulu'+number).onclick="";</span>
 			}else{//当不存在二级目录的时候，直接跳转医生页面 
 				var deptId = $("#p_fdid").val(); //一级科室ID
 				var hospId = $("#hospId").val();//医院ID
 				var dayTime =$("#dayTime").val();//预约时间
 				var timeFlg = $("#timeFlg").val(); //标识 
 				var	pName = $("#pName").val(); //一级科室名称
 				var url =_path+"/front/mobile/wx/doctorList?deptId="+deptId+"&hospId="+hospId+"&dayTime="+dayTime+"&timeFlg="+timeFlg+"&name="+pName;
 				location.href =url;
 			}
	    });
	}
	/* 医生页面跳转 */
	function twoDirectory(fdid,name){
		var name   = name; //科室名称 
		var deptId = fdid;// 二级科室ID
		var hospId = $("#hospId").val();//医院ID
		var dayTime =$("#dayTime").val();//预约时间
		var timeFlg = $("#timeFlg").val();
		var url =_path+"/front/mobile/wx/doctorList?deptId="+deptId+"&hospId="+hospId+"&dayTime="+dayTime+"&timeFlg="+timeFlg+"&name="+name;
		location.href =url;
	}
</script>
<script language="javascript" type="text/javascript" src="<%=request.getContextPath()%>/resources/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/ztree/js/jquery.ztree.core-3.5.js"></script>  
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/ztree/js/jquery.ztree.excheck-3.5.js"></script> 
</body>
</html>