为什么这个选项卡不能实现。放.box在LI同样也不用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.all{width:600px;background:cadetblue;margin:20px auto;border:1px solid silver;position: relative;}
a{display:block;padding:0 20px;font-size:14px;text-decoration: none;color:seashell;}
ul{margin-left:10px;list-style:none;width:270px;height:40px;}
li{float:left;line-height:40px;background:darkcyan;}
.box{position:absolute;left:0;top:40px;padding: 30px 30px;background: silver;color:rgba(0,0,0,0.8);}
.box p{margin-top:10px;text-indent: 2em;}
.fin{display: none;}
</style>
</head>
<body>
<div class="all">
<!--<ul>
<li class="one" style="background: pink;">
<a href="##">HOME</a>
<div class="box box1" >
<h4>第一页</h4>
<p>啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
</div>
</li>
<li class="one1">
<a href="##">ABOUT</a>
<div class="box box2">
<h4>第二页</h4>
<p>啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
</div>
</li>
<li class="one3">
<a href="##">CLIENTS</a>
<div class="box box3">
<h4>第三页</h4>
<p>啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
</div>
</li>
</ul>-->
<ul>
<li class="one" style="background: pink;">
<a href="##">HOME</a>
</li>
<li class="one1">
<a href="##">ABOUT</a>
</li>
<li class="one3">
<a href="##">CLIENTS</a>
</li>
</ul>
<div class="box box1" >
<h4>第一页</h4>
<p>啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
</div>
<div class="box box2">
<h4>第二页</h4>
<p>啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
</div>
<div class="box box3">
<h4>第三页</h4>
<p>啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
</div>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
$(".all ul li").click(function(){
$(this).css('background-color','pink').siblings().css('background-color','darkcyan');
$(".all .box").css("z-index","999").siblings().css("z-index","-1");
})
})
</script> 
慕粉1620137005浏览 1128回答 1
1回答
随时随地看视频慕课网APP
Html/CSS
Html5
JQuery