a标签与js的冲突

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

html代码如下：

<div id="newleft">

        <ul>

            <li><a href="" class="showList" >${guideList[].type}</a></li>

            <li><a href="" class="showList" >${guaranteeList[].type}</a></li>

            <li><a href="" class="showList" >${membeList[].type}</a></li>

            <li><a href="" class="showList" >${afterSalList[].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 = ;//在集合中的索引

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

最新文章

热门文章