jquery tab点击切换的问题

问题：

页面结构见下

<div id="wrap"><li><a href="#" class="active">昵称修改</a></li><li><a href="#">志愿者修改</a></li><li><a href="#">头像修改</a></li><li><a href="#">手机修改</a></li><li><a href="#">密码修改</a></li>
</div>

首先密码修改默认有一个A样式，剩下的样式是一样的。

实现的功能是，当我点击其他几个按钮时，比如我点击志愿者修改时，那么志愿者修改对应的的样式变成了A，昵称修改的样式和其他未点击的保持一致。

当时想的给每一个a标签绑定一个事件，但这样代码重复的太多了。

后来因为点击每个a标签都会经历一个初始化的过程，在初始化的过添加一个方法。实现点击样式的切换。

//具体实现
$("#wrap li a").on('click', function(){for(var i=0; i<$("#wrap li a").length; i++){$("#wrap li a").removeClass("active");}$("#wrap li a").addClass("active");
})

这样就可以很好地实现样式的切换。　　

转载于:https://www.cnblogs.com/WaTa/p/6083804.html

jquery tab点击切换的问题相关推荐

jQuery实现点击切换加减号切换和内容的展开收缩
最近看到了这样一个需求,也算是一个很简单的吧,效果如下: 于是结合jQ,自己写论文一个类似功能的: <!DOCTYPE html> <html><head>< ...
点击切换属性html,jQuery_$方法、属性、点击切换
jQuery_$方法 1.$.each():遍历数组或对象中的数据 2.$.trim():去除字符串两边的空格 3.$.type(obj):得到数据的类型 4.$.isArray(obj):判断是否为 ...
超好用的简单的jquery tab选项卡切换代码（点击切换和导航栏滑过）
实例1(点击切换): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...
【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果
1.实现效果: 案例描述:当用户单击不同的导航时,与其对应的内容回相应的呈现. 案例要求:使用jquery制作实现tab选项卡单击切换效果. 2.实现思路: (1)div+css布局,制作选项卡和对应 ...
html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果使用方法: 1.将附件中的index ...
html5 tab菜单切换页面,11个常用的jQuery TAB切换菜单源码及制作教程
11个常用的jQuery TAB切换菜单源码及制作教程 Sponsor TAB切换式菜单可以方便为我们减少很多网页布局空间,而且用jQuery的话可以加入一些动画效果,比如渐变,向左右滑动等,提升一定 ...
JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html> <h ...
jquery中点击切换的实现
项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1.需要自定义jQuery方法toggle. // toggle方法$ ...
html上下滚动切换顶端tab,jQuery实现Tab菜单滚动切换的方法
本文实例讲述了jQuery实现Tab菜单滚动切换的方法.分享给大家供大家参考.具体如下: 这是一款jQuery实现让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起 ...

jquery tab点击切换的问题

jquery tab点击切换的问题相关推荐

最新文章

热门文章