js实现简单的滑动门选项卡

1、效果：

html:

<div class="tab">
    	<ul class="title">
    		<li class="active">新闻</li><li>体育</li><li>娱乐</li><li>科技</li><li>音乐</li>
    	</ul>
    	<div class="content">
    		<div class="content-con">新闻</div>
    		<div class="content-con">体育</div>
    		<div class="content-con">娱乐</div>
    		<div class="content-con">科技</div>
    		<div class="content-con">音乐</div>
    	</div>
    </div>

css:

 <style>
    	*{margin: 0;padding: 0;} 	
    	.tab{position: relative;margin: 20px;}
    	.title{position: absolute;z-index: 10;}
    	.title li{float: left;display: inline-block;padding: 0 5px;font-size: 16px;height: 30px;line-height: 30px;border: 1px solid #333;background: #F0981C;border-right: none;}
    	.title li:last-child{border-right: 1px solid #333;}
    	.title li.active{background: #fff;border-bottom: 1px solid #fff;}
    	.content{position: absolute;top: 31px;width: 400px;height: 150px;border: 1px solid #333;}
    	.content-con{display: none;}
    	.content-con:first-child{display: block;}
    </style>

js:

 <script>
    	$(function(){
    		$(".title li").click(function(){
    			var i=$(this).index();
    			$(this).addClass("active").siblings().removeClass('active');
    			$(".content-con").eq(i).show().siblings().hide();
    		});
    	});
    </script>

2、效果：

html、js同上

css:

 <style>
    	*{margin: 0;padding: 0;} 	
    	.tab{position: relative;margin: 20px;}
    	.title{position: absolute;z-index: 10;}
    	.title li{float: left;display: inline-block;padding: 0 5px;font-size: 16px;height: 30px;line-height: 30px;border: 1px solid #333;background: #F0981C;margin-right: 3px;}
    	.title li.active{background: #fff;border-bottom: 1px solid #fff;}
    	.content{position: absolute;top: 31px;width: 400px;height: 150px;border: 1px solid #333;}
    	.content-con{display: none;}
    	.content-con:first-child{display: block;}
    </style>

3、效果:

html、js同上

css:

<style>
    	*{margin: 0;padding: 0;} 	
    	li{list-style: none;}
    	.tab{position: relative;margin: 20px;}
    	.title{position: absolute;z-index: 10;width: 80px;float: left;text-align: center;}
    	.title li{padding: 0 5px;font-size: 16px;height: 24px;line-height: 24px;border: 1px solid #333;background: #F0981C;border-bottom: none;}
    	.title li:last-child{border-bottom: 1px solid #333;}
    	.title li.active{background: #fff;border-right: 1px solid #fff;}
    	.content{position: absolute;left: 79px; width: 400px;height: 150px;border: 1px solid #333;float: left;}
    	.content-con{display: none;padding: 10px;}
    	.content-con:first-child{display: block;}
    </style>