动态切换版面 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nba球员网</title>
    <script src="../static/jq/jquery-3.3.1.js"></script>
    <link href="../static/image/basketball30.png" rel="icon">
    <style type="text/css">
        .title{
            background-color: lightslategray;
            width: 50px;
        }
        .player{
            background-color: #CDAD00;
            width: 100px;
        }
        .hidden{
            display: none;
        }
    </style>
    <script>
        function show(self) {
            $(self).next().removeClass("hidden");
            $(self).parent().siblings().children(".player").addClass("hidden");
        }
    </script>
</head>
<body>
    <div class="menu_top">
        <div class="title" onclick="show(this)">马刺</div>
        <ol class="player">
            <li>邓肯</li>
            <li>吉诺比利</li>
            <li>帕克</li>
        </ol>
    </div>
    <div class="menu_bottom">
        <div class="title" onclick="show(this)">火箭</div>
        <ol class="player hidden">
            <li>哈登</li>
            <li>保罗</li>
        </ol>
    </div>
</body>
</html>

 

posted @ 2019-01-20 22:23  叁零贰点肆  阅读(178)  评论(0)    收藏  举报