利用JS制作一个简单的选项卡切换

最新推荐文章于 2022-08-27 16:01:12 发布

飘渺逝水

最新推荐文章于 2022-08-27 16:01:12 发布

阅读量272

点赞数 1

本文链接：https://blog.csdn.net/weixin_45721809/article/details/102652917

版权

利用JS制作一个简单的选项卡切换

最近学习了JS的一些内容，做一个简单的选项卡切换。

以下是代码

这是页面样式：

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>选项卡切换</title>
    <style type="text/css">
     /* CSS样式制作 */ 
        *{padding: 0px;margin: 0px;font:12px;}
        #all{
            width:310px;height:200px;margin:20px;
        }
        #all ul{
            list-style: none;display:block;
            height:30px;
            border-bottom:2px red solid;
        }
        #all ul li{
            background:white;cursor:pointer;
            height:29px;width:88px;line-height:29px;
            border:1px solid gray;
            border-bottom:2px red solid;
            text-align: center;margin: 0px 5px;
            display:inline-block;
        }
        #all ul li.on{
            border-top:2px solid red;
            border-bottom: 2px solid white;
        }
        #all div{
        height:120px;line-height: 25px;
        border:1px solid rgb(74, 52, 136);
        border-top:none;padding:10px;
        }
        .hide{display: none;}
    </style>
</head>
<body>
<!-- HTML页面布局 -->
<div id="all">
    <ul>
        <li class="on">标题一</li>
        <li>标题二</li>
        <li>标题三</li>
    </ul>
    <div>
        段落一<br>
    </div>
    <div class="hide">
        段落二<br>
    </div>
    <div class="hide">
        段落三<br>
    </div>
</div>
</body>
</html>

这是用js实现选项卡切换部分：

<script type="text/javascript">
    // JS实现选项卡切换
    window.onload = function(){
        var myall = document.getElementById("all");
        var myul = myall.getElementsByTagName("ul")[0];
        var myli = myul.getElementsByTagName("li");
        var mydiv= myall.getElementsByTagName("div");

        for(var i= 0,len = myli.length;i<len;i++){
            myli[i].index = i;
            myli[i].onclick = function() {
                for(var n= 0;n<len;n++){
                    myli[n].className = "hide";
                    mydiv[n].className = "hide";
                }
                this.className = "on";
                mydiv[this.index].className = "on";
            }
        };
    }
    </script>

效果图如下：
在这里插入图片描述
…THE END…

飘渺逝水

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用JS制作一个简单的选项卡切换

利用JS制作一个简单的选项卡切换最近学习了JS的一些内容，做一个简单的选项卡切换。以下是代码这是页面样式：<!DOCTYPE html><html><head lang="zh-cn"> <meta charset="UTF-8"> <title>选项卡切换</title> <styl...
复制链接

扫一扫