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的冲突的更多相关文章
- 彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题
彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题 2018年12月08日 21:58:26 Kevin395 阅读数 1753 背景不多介绍了,直接上代码. ...
- 解决jQuery多个版本,与其他js库冲突方法
jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. < ...
- A标签执行JS脚本
A标签执行JS脚本 分类: Web2012-12-25 22:48 1368人阅读 评论(0) 收藏 举报 前言 A标签是html中常用的标签,它与button按钮是实现页面跳转的两种最常用的方式,经 ...
- js,JavaScript,a标签onclick传递参数不对,A标签调用js函数写法总结
错误示例: <a href="javascript:waterLineEdit(${goods.goods_id})" >修改 </a> <!-- 浏 ...
- 解决同一页面jQuery多个版本或和其他js库冲突方法
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 常见JS(JavaScript)冲突解决方法
1.一般JS冲突解决办法 a.最容易出现的就是js的命名冲突 ①.变量名冲突 变量有全局变量和局部变量当全局变量变量和局部变量名称一致时,就会js冲突,由于变量传递数值或地址不同就会产生JavaScr ...
- 解决echsop兼容jquery(transport.js的冲突)的问题
方案一: 本人亲测过,可以用.有的人说需要删除js目录下的gobal.js文件,否则依然会冲突.我没删除也解决了冲突. 1.加入JSON2.js文件 原因很简单,transport修改Object是为 ...
- jquery与自己写的js文件冲突解决办法
先加载JQUERY,然后使用语句 jQuery.noConflict(); 再加载其他JS文件,后面在使用jQuery时都换下,如:$('#div') 换成 jQuery('#div'), 如果嫌j ...
- 学习笔记:调用js文件冲突问题解决方案
之前自己动手做了一个小网站,在实现过程中遇到了一个关于js文件调用冲突的问题. 具体问题描述如下:在index.html文件中引用了两个js文件,单独添加banner.js或者focus_pic.js ...
随机推荐
- Codeforces340 E. Iahub and Permutations
Codeforces题号:#340E 出处: Codeforces 主要算法:思维+DP 难度:4.8 题意: 有一个长度为$n$的排列(即各元素互不相同),其中有一些为-1.现要求将数填到这些-1上 ...
- 贝叶斯定理推导(Bayes' Theorem Induction)
这里用Venn diagram来不严谨地推导一下贝叶斯定理. 假设A和B为两个不相互独立的事件. 交集(intersection): 上图红色部分即为事件A和事件B的交集. 并集(union): ...
- pfSense用户界面汉化翻译教程
pfSense用户界面汉化翻译教程 来源 https://blog.51cto.com/fxn2025/2087182 为了记录自己的汉化过程,同时也为了方便网友自己制作汉化版本,我把自己汉化pfSe ...
- 【BZOJ 1701】Cow School(斜率优化/动态凸包/分治优化)
原题题解和数据下载 Usaco2007 Jan 题意 小牛参加了n个测试,第i个测试满分是\(p_i\),它的得分是\(t_i\).老师去掉\(t_i/p_i\)最小的d个测试,将剩下的总得分/总满分 ...
- 关于 atcoder 页面美化的 css
使用方式 把下面代码加入 ESI Stylish 即可. 这是一个 chrome 的插件,可以翻\(~\)墙(或者不需要)去下载. 这是本人瞎魔改的... 代码 Update on 12-17 \(a ...
- luogu3621 城池攻占 (倍增)
好像所有人都写的左偏树 但我不会啊233 首先发现乘的时候 系数不会为负,所以能得到一个关键条件:变化后的战斗力随变化前的战斗力大小单调 所以我们考虑倍增 设hp[x][i]是从x开始一路攻克$2^i ...
- luogu3759 不勤劳的图书管理员 (树状数组套线段树)
交换的话,只有它们中间的书会对答案产生影响 树状数组记位置,套线段树记书的编号 它对应的页数和书的个数 然后就是减掉中间那些原来是逆序对的,再把交换以后是逆序对的加上 别忘了考虑这两个自己交换以后是不 ...
- CodeFroces-- 511div2 C. Enlarge GCD
题目链接:C. Enlarge GCD 给你一个序列 删除一些数看可以让他们之间的gcd变大如果可以输出删除数量最小的个数 先求出共同 gcd 然后除去 找出出现最多的质数 然后减去就可以了 #inc ...
- FastDFS 文件上传工具类
FastDFS文件上传工具类 import org.csource.common.NameValuePair; import org.csource.fastdfs.ClientGlobal; imp ...
- 【洛谷P2585】三色二叉树
题目大意:给定一个二叉树,可以染红绿黄三种颜色,要求父节点和子节点的颜色不同,且如果一个节点有两个子节点,那么两个子节点之间的颜色也不同.求最多和最少有多少个节点会被染成绿色. 题解:加深了对二叉树的 ...