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

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. Heron and His Triangle HDU - 6222(pell 大数)

    ---恢复内容开始--- Heron and His Triangle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/2 ...

  2. 启发式合并&线段树合并/分裂&treap合并&splay合并

    启发式合并 有\(n\)个集合,每次让你合并两个集合,或询问一个集合中是否存在某个元素. ​ 我们可以用平衡树/set维护集合. ​ 对于合并两个\(A,B\),如果\(|A|<|B|\),那么 ...

  3. wstngfw IKEv2服务器配置示例

    wstngfw IKEv2服务器配置示例 移动客户端的服务器配置有几个组件: 为***创建一个证书结构 配置IPsec移动客户端设置 为客户端连接创建阶段1和阶段2 添加IPsec防火墙规则 创建** ...

  4. 【LOJ#6066】「2017 山东一轮集训 Day3」第二题(哈希,二分)

    [LOJ#6066]「2017 山东一轮集训 Day3」第二题(哈希,二分) 题面 LOJ 题解 要哈希是很显然的,那么就考虑哈希什么... 要找一个东西可以表示一棵树,所以我们找到了括号序列. 那么 ...

  5. 做事从来不坚持的我又开始学习PyQt了。。。。。。

    链接附上,不再更新:PyQt5图形界面编程 第一部分 第一个程序 # -*- coding: utf-8 -*- import sys from PyQt5.QtWidgets import QApp ...

  6. 蓝桥杯试题 k倍区间(dp)

    问题描述 给定一个长度为N的数列,A1, A2, ... AN,如果其中一段连续的子序列Ai, Ai+1, ... Aj(i <= j)之和是K的倍数,我们就称这个区间[i, j]是K倍区间. ...

  7. Python学习day1 初识python&环境安装

    day1 环境安装-计算机基础 环境安装参见 https://blog.csdn.net/ling_mochen/article/details/79314118 1.markdown基本语法 htt ...

  8. request.getRequestDispatcher 页面跳转,样式丢失。

    在页面中引用样式和其它资源的时候,尽量不要用相对路径,因为"当前路径"这个概念在J2EE中是不稳定的. 所以最好都是绝对路径,类似于: <% String cp = requ ...

  9. go语言通道详解

    https://www.ardanlabs.com/blog/2017/10/the-behavior-of-channels.html Introduction When I started to ...

  10. bzoj2252 矩阵距离

    很好奇这种 普及- 的题为什么会是权限题...... 我一开始想用枚举 + 搜索,看书后发现自己脑抽了.直接BFS即可. #include <cstdio> #include <qu ...