tab选项卡(选择上面的菜单,下面出现对应的不同的内容)

使用jQuery完成
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <script src="jQuery/jquery-3.1.0.min.js"></script>
    <style>
        #menu{
            margin-top: 100px;
            margin-left: 200px;
            list-style: none;
            display: block;
            height: 50px;

        }
        #menu li{
            margin-top: -2%;
            list-style: none;
            float:left;
            height:50px;
            width:150px;
            line-height: 50px;
            background-color: #e5eaef;
            color: #3528fa;
            text-align: center;
            font-family: '微软雅黑';
        }
        #menu ul{
            display: none;
        }
        div{
            position: absolute;
            height: 150px;
            left:250px;
            display: none;
        }
        #menu li:hover{
            color: pink;
            background-color: #e7faf7;
            font-family: '微软雅黑';
        }
        .choosed{
            display: block;
        }
    </style>
</head>
<body>
<ul id="menu">
    <li>立秋<div ><img src="1.jpg"></div></li>
    <li>处暑<div><img src="2.jpg"></div></li>
    <li>秋分<div><img src="3.jpg"></div></li>
    <li>寒露<div><img src="4.jpg"></div></li>
</ul>

<script>
    $(document).ready(function() {
        $('#menu li').hover(function() {
                    $('div',this).slideDown(300);
                    $('div',this).addClass("choosed");},
        function() {
            $('div',this).slideUp(300);
            $('div',this).removeClass("choosed");})
    });
</script>
</body>
</html>