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

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的冲突的更多相关文章

  1. 彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题

    彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题 2018年12月08日 21:58:26 Kevin395 阅读数 1753   背景不多介绍了,直接上代码. ...

  2. 解决jQuery多个版本,与其他js库冲突方法

    jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. < ...

  3. A标签执行JS脚本

    A标签执行JS脚本 分类: Web2012-12-25 22:48 1368人阅读 评论(0) 收藏 举报 前言 A标签是html中常用的标签,它与button按钮是实现页面跳转的两种最常用的方式,经 ...

  4. js,JavaScript,a标签onclick传递参数不对,A标签调用js函数写法总结

    错误示例: <a href="javascript:waterLineEdit(${goods.goods_id})" >修改 </a> <!-- 浏 ...

  5. 解决同一页面jQuery多个版本或和其他js库冲突方法

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  6. 常见JS(JavaScript)冲突解决方法

    1.一般JS冲突解决办法 a.最容易出现的就是js的命名冲突 ①.变量名冲突 变量有全局变量和局部变量当全局变量变量和局部变量名称一致时,就会js冲突,由于变量传递数值或地址不同就会产生JavaScr ...

  7. 解决echsop兼容jquery(transport.js的冲突)的问题

    方案一: 本人亲测过,可以用.有的人说需要删除js目录下的gobal.js文件,否则依然会冲突.我没删除也解决了冲突. 1.加入JSON2.js文件 原因很简单,transport修改Object是为 ...

  8. jquery与自己写的js文件冲突解决办法

    先加载JQUERY,然后使用语句  jQuery.noConflict(); 再加载其他JS文件,后面在使用jQuery时都换下,如:$('#div') 换成 jQuery('#div'), 如果嫌j ...

  9. 学习笔记:调用js文件冲突问题解决方案

    之前自己动手做了一个小网站,在实现过程中遇到了一个关于js文件调用冲突的问题. 具体问题描述如下:在index.html文件中引用了两个js文件,单独添加banner.js或者focus_pic.js ...

随机推荐

  1. 【XSY1519】彩灯节 DP 数学 第二类斯特林数

    题目大意 ​ 有\(n\)盏灯,\(m\)个限制.每个限制\((x,y)\)表示第\(x\)盏灯与第\(y\)盏灯之间必须且只能亮一盏. ​ 记一种情况\(x\)亮着的灯的数量为\(f_x\),求\( ...

  2. bzoj 2761: [JLOI2011]不重复数字 (map||Treap)

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2761 思路: map标记 实现代码: #include<bits/stdc++.h&g ...

  3. ecplise An incompatible version [1.2.14] of the APR based Apache Tomcat Native library is installed, while T

    原文:https://www.cnblogs.com/levy-home/p/5676322.html 到http://archive.apache.org/dist/tomcat/tomcat-co ...

  4. 前端之Android入门(3):MVC模式(上)

    很多Android的入门书籍,在前面介绍完布局后就会逐个介绍组件,然后开始编写组件使用的例子.每每到此时小伙伴们都可能会有些疑问:是否应该先啃完一本<Java编程思想>学点 Java 知识 ...

  5. 【BZOJ5292】[BJOI2018]治疗之雨(高斯消元)

    [BZOJ5292][BJOI2018]治疗之雨(高斯消元) 题面 BZOJ 洛谷 题解 设\(f[i]\)表示剩余\(i\)点生命时的期望死亡的次数. 考虑打\(k\)次下来脸上被打了\(i\)下的 ...

  6. Luogu P5316 【恋恋的数学题】

    是个神仙题 就三种情况,分类讨论. \(k=2\): 因为保证有解,所以直接输出即可. \(k=3\): 由于对应情况可以枚举全排列寻找,所以在此只考虑顺序对应时的情况,不妨设六个数分别为\(g_{a ...

  7. 「JLOI2015」战争调度 解题报告

    「JLOI2015」战争调度 感觉一到晚上大脑就宕机了... 题目本身不难,就算没接触过想想也是可以想到的 这个满二叉树的深度很浅啊,每个点只会和它的\(n-1\)个祖先匹配啊 于是可以暴力枚举祖先链 ...

  8. [SCOI2015]国旗计划[Wf2014]Surveillance

    [SCOI2015]国旗计划 A国正在开展一项伟大的计划——国旗计划.这项计划的内容是边防战士手举国旗环绕边境线奔袭一圈.这 项计划需要多名边防战士以接力的形式共同完成,为此,国土安全局已经挑选了N名 ...

  9. Codeforces Round #516 (Div. 2)D. Labyrinth(BFS)

    题目链接:http://codeforces.com/contest/1064/problem/D 题目大意:给你一个n*m的图,图中包含两种符号,'.'表示可以行走,'*'表示障碍物不能行走,规定最 ...

  10. css预编译语言sass——mixin的使用

    以根据不同屏幕吃寸动态应用背景图片为例 新建一个mixin如下: @mixin bg_img($path, $ext){ @media screen and (max-device-width: 76 ...