用JQuery动态为选中元素添加/删除类

      在做一些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'。