问题:

页面结构见下

<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");
})

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

jquery tab点击切换的问题的更多相关文章

  1. jquery - 通过点击切换文字内容

    今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下. 百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决 ...

  2. $工具, 属性, TAB点击切换

    $工具方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  3. 多tab点击切换

    现在来一个小练习,就是用js实现多tab之间的切换: <body> <ul id="tab"> <li id="tab1"> ...

  4. jQuery_$方法、属性、点击切换

    jQuery_$方法 1.$.each():遍历数组或对象中的数据 2.$.trim():去除字符串两边的空格 3.$.type(obj):得到数据的类型 4.$.isArray(obj):判断是否为 ...

  5. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  6. 使用jQuery实现点击左右滑动切换特效

    使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...

  7. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  8. jquery Tab默认情况下自动切换

    <!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...

  9. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

随机推荐

  1. Redhat/Fedora 网络接口的配置文件和网络接口专用配置工具

    在Redhat/Fedora 中,与乙太网卡相关的配置文件位于 /etc/sysconfig/network-scripts目录中,比如 ifcfg-eth0.ifcfg-eth1 .... .... ...

  2. Win7x64易语言调试进程无法退出

    这是个历史问题,几乎所有的Win7x64机器上都会碰到这个问题 解决方法: 启动黑月重新编译器

  3. Vue表单验证插件的制作过程

    一.表单验证模块的构成 任何表单验证模块都是由 配置――校验――报错――取值 这几部分构成的. 配置: 配置规则 和配置报错,以及优先级 校验: 有在 change 事件校验, 在点击提交按钮的时候校 ...

  4. 关于layui部分表单不显示的问题(Select, checkBox)

    原因: 没有使用JS进行初始化 官方说明: https://www.layui.com/doc/base/faq.html layui.use('form', function(){ var form ...

  5. SASS:sass语法参照列表及教程

    http://sass-lang.com/documentation/file.SASS_REFERENCE.html 保存一下,上面的链接包括了scss中所有语法规则. 转载自:http://www ...

  6. selenium(1):python3.6.4+selenium3.0+chrome环境配置

    本文为配置过程: python  1.python3.6.4下载安装见python安装说明.(本博客) 2.安装python的集成编译器PyCharm. PyCharm 是由 JetBrains 打造 ...

  7. web App libraries跟referenced libraries的一些问题

    该博文内容经参看网上其他资料归纳所成,并注明出处: 问题一:myeclipse中Web App Libraries无法自动识别lib下的jar包(http://blog.csdn.net/tianca ...

  8. using namespace std 和 include 的区别

    using namespace std; int main() {  std::string dd = "ddd";//会报错namespace "std" h ...

  9. Docker.[3].镜像操作.

    Docker.[3].镜像操作. 熟悉基础指令: 查看本地镜像 docker images 查看本地镜像 docker image list (和上面显示的结果一样.) 删除本地镜像 docker r ...

  10. fedora下eclipse安装tomcat插件

    首先下载tomcat插件: http://www.eclipsetotale.com/tomcatPlugin.html,下载最新的3.3版本: 由于我的eclipse是通过yum自动安装的,因此ec ...