标签：
在做一些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‘。
标签：
原文地址：http://www.cnblogs.com/LXJ-CHEER/p/4743303.html
