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>