09-JavaScript(代码)-CSDN博客

本文链接：https://blog.csdn.net/qq_68254825/article/details/141164758

01-二级导航

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            width: 500px;
            height: 30px;
            margin: 30px auto;
            position: relative;
        }

        li {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
            line-height: 30px;
            box-sizing: border-box;
            float: left;
        }

        li div {
            width: 500px;
            height: 300px;
            border: 1px solid #000;
            box-sizing: border-box;
            position: absolute;
            top: 30px;
            left: 0;

            display: none;
        }

        /* :hover  */

        li:hover div {
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li>1
            <div class="box">1</div>
        </li>
        <li>2
            <div class="box">2</div>

        </li>
        <li>3
            <div class="box">3</div>

        </li>
        <li>4
            <div class="box">4</div>

        </li>
        <li>5
            <div class="box">5</div>

        </li>
    </ul>
</body>

02-tab切换

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            width: 500px;
            height: 30px;
            margin: 30px auto 0;
            position: relative;
        }

        li {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
            line-height: 30px;
            box-sizing: border-box;
            float: left;
        }

        .content {
            width: 500px;
            height: 302px;
            border: 1px solid #000;
            margin: 0 auto;

            position: relative;
        }

        .content .tab {
            width: 100%;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;

            display: none;
        }

        .content .active {
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <div class="content">
        <div class="tab active">1</div>
        <div class="tab">2</div>
        <div class="tab">3</div>
        <div class="tab">4</div>
        <div class="tab">5</div>
    </div>

    <script>
        // 点击li，展示对应的 tab 内容
        // 获取元素
        var list = document.getElementsByTagName("li");
        var tabs = document.getElementsByClassName("tab");

        for (var i = 0; i < list.length; i++) {
            // 保留 i 值
            list[i].index = i;

            list[i].onclick = function () {
                siblingFun();
                tabs[this.index].className = "tab active";
            }
        }

        // 排他函数
        function siblingFun() {
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].className = "tab";
            }
        }
    </script>

03-匹配模式

<body>
    <script>
        var reg = /abc/gi;

        var str = "defAbcgabcAbcABC";

        // test() 检测是否符合正则表达式的规则
        // console.log(reg.test(str));

        // console.log(reg.test(str));

        // i 忽略大小写

        // g 全局匹配

        // exec() 有匹配的值，则返回匹配值，否则返回 null
        console.log(reg.exec(str));
        console.log(reg.exec(str));
        console.log(reg.exec(str));
    </script>
</body>