zoukankan      html  css  js  c++  java
  • 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。


  • 相关阅读:
    go爬虫
    node简单爬虫request简单运用
    Centos7.4安装Mysql5.6
    HTML本地资源读取!
    node-request模块
    react中使用AntDesign库 --- babel-plugin-import 配置
    Django 模型(数据库)
    TypeScript--安装依赖,vscode配置ts自动转换成js文件
    python爬虫
    nodejs爬虫简单实现
  • 原文地址:https://www.cnblogs.com/zeussbook/p/8964976.html
Copyright © 2011-2022 走看看