JQuery实现选项卡效果

JQuery实现选项卡效果

2011-05-11    来源：本站原创    作者：佚名    ( 共1 条评论)

为了节省页面空间，一般都使用选项卡来分割内容，普通Javas cript做的选项卡，代码较多且不容易理解，这里介绍一个JQuery实现的选项卡，仅仅几行代码就可以实现我们需要的效果

为了节省页面空间，一般都使用选项卡来分割内容，普通Javascript做的选项卡，代码较多且不容易理解，这里介绍一个JQuery实现的选项卡，仅仅几行代码就可以实现我们需要的效果。

为了让结构更加明显，先定义一段CSS代码：

 

1. .hide{display:none}
2. .curr{font-weight:bold;}

.hide{display:none}
.curr{font-weight:bold;}

hide：初始时，隐藏当前项之外的容器。

curr:鼠标点击或者获得焦点时，文字变为粗体，以示区别。

HTML代码：

 

1. <div>
2. <ul id="tab">
3.     <li class="curr">选项卡一</li>
4.     <li>选项卡二</li>
5.     <li>选项卡三</li>
6.     <li>选项卡四</li>
7. </ul>
8. </div>
9. <div id="list">
10.  <div>内容一</div>
11.  <div>内容二</div>
12. <div>内容三</div>
13. <div>内容四</div>
14. </div>

<div>
<ul id="tab">
    <li class="curr">选项卡一</li>
    <li>选项卡二</li>
    <li>选项卡三</li>
    <li>选项卡四</li>
</ul>
</div>
<div id="list">
 <div>内容一</div>
 <div>内容二</div>
<div>内容三</div>
<div>内容四</div>
</div>

JS代码：

 

1. $(document).ready(function(){
2.   $('#tab > li').click(function(){
3.         $('#tab > li').removeClass('curr');
4.         $(this).addClass('curr');
5.         $('#list div').hide();
6.         $('#list div:eq(' + $('#tab > li').index(this) + ')').show();
7.     });
8. })

$(document).ready(function(){
  $('#tab > li').click(function(){
		$('#tab > li').removeClass('curr');
		$(this).addClass('curr');
		$('#list div').hide();
		$('#list div:eq(' + $('#tab > li').index(this) + ')').show();
	});
})

说明下代码含义：

$('#tab > li').click(function(){.....})代表ID为tab下所有li，点击之后的事件。

 $('#tab > li').removeClass('curr');
 $(this).addClass('curr');

上面两行代码表示先移除所有的.curr，给当前li添加.curr

$('#list div').hide();  表示隐藏ID为list下所有DIV

$('#list div:eq(' + $('#tab > li').index(this) + ')').show(); 根据$('#tab > li').index(this)得到的值，显示相应的DIV。