选项卡

在产品属性介绍内容时，使用了Tab选项卡效果。这也是网页中经常应用的形式，实际上制作选项卡的原理比较简单，通过隐藏和显示来切换不同的内容。下面将详细介绍实现选项卡的过程。

【操作步骤】

第1步，首先构建HTML结构，代码如下所示：

<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">产品属性</li>
            <li>产品尺码表</li>
            <li>产品介绍</li>
        </ul>
    </div>
    <div class="tab_box">
        <div>……</div>
        <div class="hide">……</div>
        <div class="hide"> ……</div>
    </div>
</div>

应用样式后，呈现效果如图1所示。选项卡默认第1个选项被选中，然后下面区域显示相应的内容；当单击“产品尺码表”选项卡时，“产品尺码表”选项卡将处于高亮状态，同时下面的内容也切换成“产品尺码表”了；当单击“产品介绍”选项卡时，也显示相应的内容。

图1 选项卡效果

第2步，新家JavaScript文档，保存为tab.js，然后输入下面代码：

/*Tab 选项卡 标签*/
$(function(){
	    var $div_li =$("div.tab_menu ul li");
	    $div_li.click(function(){
			$(this).addClass("selected")            //当前<li>元素高亮
				   .siblings().removeClass("selected");  //去掉其他同辈<li>元素的高亮
            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
			$("div.tab_box > div")   	//选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
					.eq(index).show()   //显示 <li>元素对应的<div>元素
					.siblings().hide(); //隐藏其他几个同辈的<div>元素
		}).hover(function(){
			$(this).addClass("hover");
		},function(){
			$(this).removeClass("hover");
		})
})

在上面代码中，首先为<li>元素绑定单击事件，绑定事件后，需要将当前单击的<li>元素高亮。然后去掉其他同辈<li>元索的高亮。

第3步，单击选项卡后，当前<li>元素处于高亮状态，而其他的<Ii>元素已去掉了高亮状态。但选项卡下面的内容还没被切换，因此需要将下面的内容也对应切换，显示效果如图2所示。

图2 选项卡切换效果

第4步，从选项卡的基本结构可以知道，每个<li>元素分别对应一个<div>区域。因此可以根据当前单击的<li>元素在所有<li>元素中的索引，然后通过索引来显示对应的区域。

【提示】

在上面的代码中，要注意$("div.tab_box > div")这个子选择器，如果用$("div.tab_box div")选择器，当子节点里再包含<div>元素的时候，就会引起错误，因此获取当前选项卡下的子节点，才是这个例子所需要的。