<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡嵌套</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
#box{
width: 798px;
border: 1px solid seagreen;
margin: 30px auto;
}
#box:after{
content:"";
display: block;
clear: both;
}
#leftBox{
width: 198px;
float: left;
}
#leftBox li{
width: 100%;
height: 73px;
background:rebeccapurple;
color: #000;
line-height: 73px;
border-top: 1px solid red;
border-bottom: 1px solid red;
font-size: 30px ;
text-align: center;
}
#rightBox{
width: 600px;
float: left;
}
#rightBox:after{
content:"";
display: block;
clear: both;
}
#rightBox p{
width: 100%;
height: 260px;
font:100px/325px "黑体";
text-align: center;
background: #c6c6c6;
}
#rightBox div{
width: 100%;
float: left;
/*display: none;*/
}
#rightBox ul{
width: 100%;
height: 38px;
display: table;
}
#rightBox li{
line-height: 38px;
background-color: #A9A9A9;
text-align: center;
display: table-cell;
border: 1px solid green;
}
#leftBox .active{
background-color: #FFE4C4;
}
#rightBox ul .active{
background-color: #cbb69c;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="box">
<div id="leftBox">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
<div id="rightBox">
<div style="display: block;">
<p>A1</p>
<ul>
<li class="active">a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
</ul>
</div>
<div style="display: none;">
<p>B1</p>
<ul>
<li>b1</li>
<li>b2</li>
<li>b3</li>
<li>b4</li>
</ul>
</div>
<div style="display: none;">
<p>C1</p>
<ul>
<li>c1</li>
<li>c2</li>
<li>c3</li>
<li>c4</li>
</ul>
</div>
<div style="display: none;">
<p>D1</p>
<ul>
<li>d1</li>
<li>d2</li>
<li>d3</li>
<li>d4</li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
//鼠标移入地时候调用方法
$("#leftBox li").mouseover(function () {
//修改自己的样式
$(this).addClass('active').siblings('li').removeClass("active");
//修改右边div
$("#rightBox div").eq($(this).index()).show().siblings("div").hide();
})
$("#rightBox li").click(function () {
//修改右边li的样式
$(this).addClass('active').siblings("li").removeClass("active");
var lival=$(this).html();
console.log(lival);
//父辈元素的兄弟元素
$(this).parent().prev().html(lival)
})
})
</script>
</html>
