a标签与js的冲突

Posted 2020-11-01 别动我的猫

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

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。