tab选项卡

选项卡在网站中是非常常用的，我们一起来学学吧

原理：点击标题的时候，显示对应的内容，就控制元素的显示隐藏就可以

1.html结构

<div class="tab">
	<!-- 标题 -->
	<ul class="tab_tit">
		<li class="red"><a href="#"></a></li>
		<li class="blue"><a href="#"></a></li>
		<li class="green"><a href="#"></a></li>		
	</ul>
	
	<!-- 内容 -->
	<ul class="tab_cont">
		<li class="red"><a href="#"></a></li>
		<li class="blue"><a href="#"></a></li>
		<li class="green"><a href="#"></a></li>		
	</ul>
</div>

 

 

先清除一下默认样式

.tab{width:300px;height:250px;}
.tab_tit{height:30px;background:#ccc;}
.tab_cont li{height:220px;}

.red{background:red;}
.blue{background:blue;}
.green{background:green;}

现在的样子

我们清楚一下默认样式

body,ul,li{margin:0;padding:0;}
li{list-style:none;}

现在只需要用jquery来控制点击标题来显示对应的块了

$(function(){
    //显示第一个内容
    $('.tab-cont ul:first').show();
    //点击标题，显示对应的内容
    //获取第几个
    $('.tab_tit li').click(function() {
        var $inde = $(this).index();
        alert($inde);
        $('.tab-cont li').eq($inde).show().siblings('li').hide();
    });

});