Jquery實現點擊菜單后顯示對應的內容模塊

本文轉載自查看原文 2020-05-16 22:54 866

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <style>
        *{
            margin: 0;
        }
        .cc{
            margin: 0 auto;
            width: 75%;

        }
        .menus{
            height: 50px;
            width: 1000px;
            background-color: royalblue;
            border: 1px solid blue;
        }

        .contents{
            height: 300px;
            width: 1000px;
            background-color: purple;
            border: solid goldenrod 1px;
        }
        .uu{
            line-height: 50px;

        }
        .uu li{
            display: inline-block;

        }
        .uu li{
            margin: -2.2px;
            padding-left: 6px;
            padding-right: 6px;
        }

        .getcolor{
            background-color: olivedrab;
            border-top: solid 2px red;

        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="cc">
        <div class="menus">
            <ul class="uu">
                <li class="getcolor" aa = "d1" onclick="f1(this)">菜單一</li>
                <li aa = "d2" onclick="f1(this)">菜單二</li>
                <li aa = "d3" onclick="f1(this)">菜單三</li>
            </ul>
        </div>
        <div class="contents">
            <div id="d1">內容一</div>
            <div id="d2" class="hide">內容二</div>
            <div id="d3" class="hide">內容三</div>
        </div>
    </div>
</body>
        <script>
            function f1(self) {
                $(self).addClass("getcolor").siblings().removeClass("getcolor");
                //獲取屬性值
                var getele = $(self).attr("aa");
                // console.log(getele);
                //改變內容
                $("#"+getele).removeClass("hide").siblings().addClass("hide");
            }
        </script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue實現點擊左側菜單，右側顯示對應的內容 uniapp(vue)實現點擊左側菜單，右側顯示對應的內容 uniapp(vue)實現點擊左側菜單，右側顯示對應的內容 layui實現左側菜單點擊右側內容區顯示導航菜單點擊后高亮顯示原生js模擬錨點，實現點擊后，內容定位到本頁的對應位置 arcgis api for js實現點擊文字內容獲取所對應的點高亮顯示。 jquery 實現點擊顯示，再點擊隱藏 jquery實現點擊顯示，再點擊隱藏 js點擊某分類顯示對應內容，即tab切換效果