用js实现选项卡，点击不同按钮显示执行不同的操作

最新推荐文章于 2024-04-30 16:57:21 发布

psjasf1314

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量3.5k

点赞数 2

分类专栏： css样式 HTML js 文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/psjasf1314/article/details/124126370

版权

HTML 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

css样式

2 篇文章 0 订阅

订阅专栏

内容描述：通过不同的按钮显示不同的页面，用js实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用js实现选项卡</title>
    <style>
        /*class的css写法*/
        .active {
            background-color: gold;
        }

        /*某一个标签下的标签的css写法*/
        #div1 div {
            width: 100px;
            height: 100px;
            border: 1px solid gray;
            background-color: lavenderblush;
            display: none;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var button = oDiv.getElementsByTagName('input');
            var oDiv1 = oDiv.getElementsByTagName('div');
            for (var i = 0; i < button.length; i++) {
                button[i].index = i;
                button[i].onclick = function () {
                    for (var i = 0; i < button.length; i++) {
                        //在发生点击后，先把所有的div隐藏和背景颜色隐藏
                        button[i].className = '';
                        oDiv1[i].style.display = 'none';
                    }
                    //this是表示当前的点击位置
                    this.className = 'active';
                    // this.className = 'active';
                    oDiv1[this.index].style.display = 'block';
                    //alert(this.value);
                };
            }
        };
    </script>
</head>
<body>
<div id="div1">
    <input type="button" id="button1" value="选项1" class="active">
    <input type="button" id="button2" value="选项2">
    <input type="button" id="button3" value="选项3">
    <input type="button" id="button4" value="选项4">
    <div style="display: block">这是选项卡1</div>
    <div>这是选项卡2</div>
    <div>这是选项卡3</div>
    <div>这是选项卡4</div>
</div>
</body>
</html>

代码介绍：

这里用了四个input标签和四个div标签，用class来对button按钮的颜色进行控制，this在这里的作用是表示当前对象，this.index就表示当前的编号，用onclick方法来对四个button的点击进行监听，完成逻辑程序。

效果图：

初始图：

点击选项二：

点击选项三：

点击选项四：

psjasf1314

关注

2
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
0
评论
用js实现选项卡，点击不同按钮显示执行不同的操作

内容描述：通过不同的按钮显示不同的页面，用js实现。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用js实现选项卡</title> <style> /*class的css写法*/ .active { background-color: gold;
复制链接

扫一扫