js的简单应用

最新推荐文章于 2020-07-15 16:21:47 发布

进阶的小牛

最新推荐文章于 2020-07-15 16:21:47 发布

阅读量90

点赞数

分类专栏：零散点小结

本文链接：https://blog.csdn.net/datuzidppd5556/article/details/98873200

版权

零散点小结专栏收录该内容

20 篇文章 0 订阅

订阅专栏

js的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width:300px;
            height:40px;
            margin: 0 auto;
            text-align: center;
            /* border: 1px solid red; */
        }
        ul {
            width:300px;
            height: 40px;
        }
        #list li {
            float: left;
            list-style: none;
            width:100px;
            height: 39px;
            line-height: 39px;
            border-bottom: 1px solid black;
        }
        #list .active {
            border:none;
        }
        #box p {
            display:none;
        }
        #box .show {
            display: block;
        }
        
    </style>
</head>
<body>
    <div id="box">
        <ul id="list">
            <li class="active">首页</li>
            <li>关于我们</li>
            <li>我的</li>
        </ul>

        <p class="show">首页</p>
        <p>关于我们</p>
        <p>我的</p>

    </div>

    <script>
        var box = document.getElementById("box");
        var list = document.getElementById("list");
        var uli = list.getElementsByTagName("li");
        var pp = box.getElementsByTagName("p");
        uli[0].onclick = function () {
            uli[0].className = 'active';
            uli[1].className = '';
            uli[2].className = '';

            pp[0].className = 'show';
            pp[1].className = '';
            pp[2].className = '';
        }

        uli[1].onclick = function () {
            uli[1].className = 'active';
            uli[0].className = '';
            uli[2].className = '';

            pp[1].className = 'show';
            pp[0].className = '';
            pp[2].className = '';
        }

        uli[2].onclick = function () {
            uli[2].className = 'active';
            uli[1].className = '';
            uli[0].className = '';

            pp[2].className = 'show';
            pp[1].className = '';
            pp[0].className = '';
        }
    </script>
</body>
</html>

运行结果：（会变化的）
在这里插入图片描述

进阶的小牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的简单应用

js的简单应用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
复制链接

扫一扫

专栏目录