a标签与js的冲突

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

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的冲突

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