问题:

页面结构见下

<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. iostat统计信息

    用途:报告中央处理器(CPU)统计信息和整个系统.适配器.tty 设备.磁盘和 CD-ROM 的输入/输出统计信息. 语法:iostat [ -c | -d ] [ -k ] [ -t | -m ] ...

  2. Data Lake Analytics账号和权限体系详细介绍

    一.Data Lake Analytics介绍 数据湖(Data Lake)是时下大数据行业热门的概念:https://en.wikipedia.org/wiki/Data_lake.基于数据湖做分析 ...

  3. HTML input type=file文件选择表单的汇总(一)

    HTML input type=file 在onchange上传文件的过程中,遇到同一个文件二次上传无效的问题. 最近在做项目过程中,遇到同一文件上传的时候,二次上传没有效果,找了资料,找到了原因: ...

  4. SQL Server新增用户并控制访问权限设置。

    新增用户: 一.进入数据库:[安全性]—>[登录名]—>[新建登录名] 二.在常规选项卡中.如图所示,创建登录名.注意设置默认的数据库. 三.在[用户映射]下设置该用户所能访问的数据库.并 ...

  5. 初探 jQuery

    为什么要学习jQuery? 使用javascript开发过程中,有许多的缺点: 1. 查找元素的方法太少,麻烦. 2. 遍历伪数组很麻烦,通常要嵌套一大堆的for循环. 3. 有兼容性问题. 4. 想 ...

  6. 笔试面试记录-字符串转换成整型数等(aatoi,itoa)

    C语言中经常用到字符串与数字之间的相互转换,常见的此类库函数有atof(字符串转换成浮点数).atoi(字符串转换成整型数).atol(字符串转换成长整形).itoa(整型数转换成字符串).ltoa( ...

  7. 如何设置单个 Git 仓库的代理从而提高更新速度

    如何设置单个 Git 仓库的代理从而提高更新速度 因为特殊原因,需要单独对 Git 仓库设置远程代理,从而提高更新速度. 主要原因是因为有一些远程 Git 仓库比较慢. 最初的想法是系统全局代理,但是 ...

  8. JS DOM节点的增删改查

    合并拆分 行内样式  script写在html里面

  9. Leetcode860.Lemonade Change柠檬水找零

    在柠檬水摊上,每一杯柠檬水的售价为 5 美元. 顾客排队购买你的产品,(按账单 bills 支付的顺序)一次购买一杯. 每位顾客只买一杯柠檬水,然后向你付 5 美元.10 美元或 20 美元.你必须给 ...

  10. Leetcode872.Leaf-Similar Trees叶子相似的树

    请考虑一颗二叉树上所有的叶子,这些叶子的值按从左到右的顺序排列形成一个 叶值序列 . 举个例子,如上图所示,给定一颗叶值序列为 (6, 7, 4, 9, 8) 的树. 如果有两颗二叉树的叶值序列是相同 ...