码迷,mamicode.com
首页 > Web开发 > 详细

a标签与js的冲突

时间:2018-04-27 23:50:20      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:href   解决   oid   slist   list   font   help   win   text   

技术分享图片

如上图,需要做一个页面,点击左边的标题,右边就显示左边标题下的子标题的集合,

html代码如下:

<div id="newleft">
<ul>
<li><a href="" class="showList" >${guideList[0].type}</a></li>
<li><a href="" class="showList" >${guaranteeList[0].type}</a></li>
<li><a href="" class="showList" >${membeList[0].type}</a></li>
<li><a href="" class="showList" >${afterSalList[0].type}</a></li>
</ul>
</div>
<div id="newsRight">
<div class="showNewsList">
<c:forEach var="news" items="${guideList}">
<p><a class="newInfo" href="${pageContext.request.contextPath}/static/tohelpView/1/${news.nId}">${news.title}...</a></p>
</c:forEach>
</div>
<div class="showNewsList" >
<c:forEach var="newsa" items="${guaranteeList}">
<p><a class="newInfo" href="${pageContext.request.contextPath}/static/tohelpView/2/${newsa.nId}">${newsa.title}...</a></p>
</c:forEach>
</div>
<div class="showNewsList">
<c:forEach var="newsb" items="${membeList}">
<p><a class="newInfo" href="${pageContext.request.contextPath}/static/tohelpView/3/${newsb.nId}">${newsb.title}...</a></p>
</c:forEach>
</div>
<div class="showNewsList">
<c:forEach var="newsc" items="${afterSalList}">
<p><a class="newInfo" href="${pageContext.request.contextPath}/static/tohelpView/4/${newsc.nId}">${newsc.title}...</a></p>
</c:forEach>
</div>
</div>

js代码如下:
/**
* 点击
*/
$(document).on("click",".showList",function(){
var indexaa = 0;//在集合中的索引
var $showList = $(".showList");//按钮集合,jQuery对象一定要带“$”
var $div = $("#newsRight").children(".showNewsList");//显示集合
indexaa=$showList.index($(this));//集合中的索引
$div.hide();
$div.eq(indexaa).fadeIn();
});
问题:点击事件始终只显示一个相同的子标题,也就是第一个。换了好多个js写法都是那样。
后来发现是a标签的问题
<a href=""
后来改成:<a href="#" 或者<a href="javascript:void(0)"
问题就解决了,<a href="javascript:void(0)"相当于一个死链接;<a href="#" 相当于链接本页面
补充:
a标签的onclick 事件先执行, href 属性下的链接后执行(页面跳转或 javascript 伪链接),如果不想执行 href 属性下的链接,onclick 需要返回 false。


a标签与js的冲突

标签:href   解决   oid   slist   list   font   help   win   text   

原文地址:https://www.cnblogs.com/zeussbook/p/8964976.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!