首先我们先来个基础布局:
<style>
.box{width: 500px;height: 400px;border: solid 1px black;margin: 20px auto;}
.box ul{margin: 0;padding: 0;list-style: none;height: 40px;line-height
:40px;display: flex;background: #ccc;text-align: center;}
.box li{flex:1;border-left: solid 1px black;border-right: solid 1px black;}
.box li.active{background: red;}
.cont{}
.cont div{width: 500px;height: 360px;display: none;}
.cont .cont1{background: #f0f;display: block;}
.cont .cont2{background: #f00;}
.cont .cont3{background: #00f;}
.cont .cont4{background: #0ff;}
</style>
<body>
<div class="box">
<ul><li class="active">1</li><li>2</li><li>3</li><li>4</li></ul>
<div class="cont">
<div class="cont1">第一个选项卡的内容区域</div>
<div class="cont2">第二个选项卡的内容区域</div>
<div class="cont3">第三个选项卡的内容区域</div>
<div class="cont4">第四个选项卡的内容区域</div>
</div>
</div>
</body>把下载好的jquery文件引入：
<script src="jquery.js"></script>见证奇迹的时刻：
<script>
$(".box").find("li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
$(".cont").children("div").css("display","none").eq($(this).index()).css("display","block");
})
</script>效果如下：
