函数如下
[javascript] view plaincopy
- /**
- *切换效果
- */
- function switab(tab,con,tab_c_css,tab_n_css,no) {
- $(tab).each(function(i){
- if(i == no)
- {
- $(this).addClass(tab_c_css);
- }else
- {
- $(this).removeClass(tab_c_css);
- $(this).addClass(tab_n_css);
- }
- })
- if (con)
- {
- $(con).each(function(i){
- if(i == no)
- {
- $(this).show();
- }else
- {
- $(this).hide();
- }
- })
- }
- }
使用前提条件:
加载jquery类
页面上有一个系列的切换的头和主体,如
tab头:
<div id="switab">
<li class="on" >标题1</li>
<li >标题2</li>
<li >标题3</li>
内容:
<div class="content" >主内容1</div>
<div class="content" >主内容2</div>
<div class="content" >主内容3</div>
</div>
然后面页面的加载事件,或直接在上面的li上面添加上点击事件:
页面加载事件方法:
$(document).ready(function(){
$("#switab li").each(function(i){
$(this).click(function(){
switab(‘#switab li‘,‘.content‘,‘on‘,‘‘,i);
})
})
})
如果直接在li添加点击事件就在上面的li写成如下:
<li class="on" onclick="switab(‘#switab li‘,‘.content‘,‘on‘,‘‘,0)">标题1</li>
<li onclick="switab(‘#switab li‘,‘.content‘,‘on‘,‘‘,1)">标题2</li>
<li onclick="switab(‘#switab li‘,‘.content‘,‘on‘,‘‘,2)">标题3</li>
但为了代码分离,建义使用前面的方法
switab函数参数介绍:
1.要切换的标题的批配条件,不要用ID,因为jquery用ID的话,找到的是一个对像,而不是对像数组,可以用name/class 或是父的过渡到子的,就像我例子上的/
2.主体内容批配的条件
3.标题为点中时的样式
4.标题为非选中状态时的样式
5.当前第几个,从0开始
由于用了jquery就不需要为标题/内容定义特殊的ID了,只要jquery能定位到这些就可以了。代码灵活性提高了,同时JS与HTML代码实现了完全分离!
另外如果以后要增加标签项,JS不用动,直接加就可以了。只要标题和内容相批配就行了