Conflict between a tag and js

As shown in the figure above, you need to make a page, click the title on the left, and the collection of subtitles under the title on the left will be displayed on the right.

The html code is as follows:

<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代码如下：

/** 
* Click 
*/ 
$(document).on("click",".showList",function(){ 
    var indexaa = 0;//Index in collection 
    var $showList = $(".showList") ;//Button collection, jQuery object must have "$" 
    var $div = $("#newsRight").children(".showNewsList");//Display collection 
    indexaa=$showList.index($(this)) ;//Index in collection 
    $div.hide(); 
    $div.eq(indexaa).fadeIn(); 
}); 
Problem: click event always shows only one same subtitle, which is the first one. Changed a lot of js writing is the same. 
Later, it was found that it was a problem with the a tag

<a href="" 
was later changed to: <a href="#" or <a href="javascript:void(0)" The 
problem is solved, <a href="javascript:void(0)" is equivalent to a Dead link; <a href="#" is equivalent to linking this page 
. Supplement: 
the onclick event of the a tag is executed first, and the link under the href attribute is executed later (page jump or javascript pseudo link), if you do not want to execute the link under the href attribute , onclick needs to return false.

Conflict between a tag and js

Guess you like