选项卡嵌套

mouseover(func)鼠标移动到对象元素上
.eq()通过id进行筛选过滤
.show()显示对象元素
.hide()隐藏对应元素
.siblings()查找对应元素，排除自己本身
.addClass()添加类名
.removeClass()删除类名
.html()获取或删除内容
.parent()获取父级元素
.prev()获取对应元素挨着的上一个元素，同胞元素
<!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>
View Code