在做一些tab页功能时,我们经常会见到如下样式:

即当选中一个元素时,在此元素下会添加相应的类,以示区别。今天就研究了一下如何用JQuery实现此效果。

1. HTML代码

<a id="med_specialist_1" name="med-specialist" class="med-active">专家门诊1</a>
<a id="med_specialist_2" name="med-specialist">专家门诊2</a>

2. JS代码

//js实现给选中的元素动态添加类  思路:写好要加的类,点击元素时,先移除所有,然后为当前元素添加此类
$(function(){
$('a[name=med-specialist]').on('click', function() {
$('.med-active').removeClass('med-active');
$(this).addClass('med-active');
})
});

总结:先写好你要添加的类的css代码,并给其中一个元素加上此类,当做默认选中元素。给这些元素给相同的name,用于选中此类元素。写点击事件,当点击此类元素时,先将样式移除,然后给当前选中的元素添加样式。

还有一个例子,就是用复选框的样式实现单选功能。可以用css直接去画,将圆形变成方形,但是css功底要比较扎实。以下代码用js实现。

//js实现用复选框的样式实现单选框的效果
$(function(){
var box = document.getElementsByName('med-reg-10-cb');
for(var i=0;i<box.length;i++) {
box[i].onclick=function(){
for(var i=0;i<box.length;i++){
box[i].checked = false;
}
this.checked = true;
}
}
});

页面的html代码就不放了,就是写几个input,type为checkbox,把name都写成js里要得到的就行了。上例中,就是把name都写成'med-reg-10-cb'。

用JQuery动态为选中元素添加/删除类的更多相关文章

  1. jquery动态生成的元素添加事件的方法

    动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...

  2. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

  3. 向第一个 p 元素添加一个类

    This is a heading This is a paragraph. This is another paragraph. 向第一个 p 元素添加一个类 111 <html> &l ...

  4. jquery中为动态增加的元素添加事件

    // html代码 <ul id="main"> </ul> // js代码 $(function(){ // 动态添加html代码 $("#ma ...

  5. Jquery动态在td中添加checkbox

    如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...

  6. jquery 动态创建的元素,绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  7. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  8. 基于jQuery动态创建html元素

    在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了. 常见的动态创建HTML元素的方式,有如下几种,大体都差 ...

  9. jQuery动态创建html元素的常用方法汇总

    在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到 ...

随机推荐

  1. 网易云课堂JS笔记

    JS能做什么?? ----网易官网:选项卡----京东: Hbuilder编辑器介绍 JavaScript简介 ECMAScript:javaScript组成语法和基本对象 DOM:文档对象模型,描述 ...

  2. 一个Java递归删除目录的方法

    public static void delDir(File f) { // 判断是否是一个目录, 不是的话跳过, 直接删除; 如果是一个目录, 先将其内容清空. if(f.isDirectory() ...

  3. Longest Substring Without Repeating Characters(Difficulty: Medium)

    题目: Given a string, find the length of the longest substring without repeating characters. Examples: ...

  4. CSS3的透明度使用

    大家在敲代码的时候总会遇见一个问题.就是透明度opacity 会导致整个元素内全部都会改变,通常的方法是在同级元素后面再加上一个元素标签,但是现在有CSS3 ,我们完全不用这么做了.看代码 <! ...

  5. 0427 scrum & 读后感

    5.Scrum团队成立 5.1 团队名称,团队目标.团队口号.团队照: 5.2 角色分配 6. 团队项目选题 详情见团队博客:http://www.cnblogs.com/alfredzhu/ htt ...

  6. 通过CSS实现小动物

    此例演示的是通过CSS实现动物头像,效果如下: 好了,上代码: html代码: <html> <head> <meta charset="utf-8" ...

  7. 0909 a newbeginning

    操作系统无意是所有计算机系各专业的基础,如果不懂这门课程的知识,大学四年计算机可以说是白读了. 这学期很荣幸能上MISSDU的操作系统,我也希望能学到关于操作系统的知识,以至于丰富自己的专业知识. 下 ...

  8. magento的url中 去掉多余的目录层级

    有时我们需要仅仅显示一层目录的URL路径.而不要出现多个路径的现实,我们可以用以下方法修改: Edit  /app/code/core/Mage/Catalog/Model/Url.php 找到632 ...

  9. 刚写完的商城erp + 这个商城前台,新鲜出炉。自己1个人写, 包括php框架和前端html页面.

    刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面. 刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面.

  10. Apache commons-client authentication(授权)

    import org.apache.commons.httpclient.HttpClient; import org.apache.commons.httpclient.UsernamePasswo ...