练习：选项卡

最新推荐文章于 2022-04-10 12:12:13 发布

越努力越

最新推荐文章于 2022-04-10 12:12:13 发布

阅读量135

点赞数

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_45353679/article/details/104642295

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

选项卡

根据点击事件调取不同的选项

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>选项卡</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
            font-size: 14px;
        }
        
        #container {
            width: 398px;
            margin: 100px auto;
        }
        
        #container a {
            display: block;
            width: 98px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            float: left;
            border-top: solid 1px #FF4400;
            border-bottom: solid 1px #FF4400;
            border-left: solid 1px #FF4400;
            color: #333333;
            text-decoration: none;
        }
        
        #container a:hover {
            color: #FF4400;
        }
        
        .content {
            width: 355px;
            height: 140px;
            text-align: center;
            border-right: solid 1px #FF4400;
            border-bottom: solid 1px #FF4400;
            border-left: solid 1px #FF4400;
            padding: 30px 0 0 40px;
            display: none;
        }
        
        .clear {
            clear: left;
        }
        
        #container a.on {
            background: #FF4400;
            color: #fff;
        }
    </style>

</head>

<body>
    <div id="container">
        <a href="#" class="on">充话费</a>
        <a href="#">充流量</a>
        <a href="#">充固话</a>
        <a href="#" style="border-right: solid 1px #FF4400;">充宽带</a>

        <div class="clear"></div>

        <div class="content" style="display:block;">
            <img src="images/1.png" />
        </div>
        <div class="content">
            <img src="images/2.png" />
        </div>
        <div class="content">
            <img src="images/3.png" />
        </div>

        <div class="content">
            <img src="images/4.png" />
        </div>
    </div>
    <script>
        var as = document.getElementsByTagName('a'); // 四个选项
        var divs = document.getElementsByClassName('content');
        // 循环给每个选项绑定单击事件
        for (var i = 0; i < as.length; i++) {
            as[i].index = i; // 记住自己索引号
            as[i].onclick = function() {
                // 当前自己设置背景色 其他选项移除
                // 排他思想 先全部移除 之后对自己设置
                for (var j = 0; j < as.length; j++) {
                    as[j].className = '';
                    divs[j].style.display = 'none';
                }
                this.className = 'on';
                // 其次 让对应内容显示 其他全部隐藏
                /*
                for(var k=0; k<divs.length; k++) {
                	divs[k].style.display = 'none';
                }
                */
                divs[this.index].style.display = 'block';
            }
        }
    </script>
</body>

</html>

第二种方法：

 <div id="container">
        <a href="#" class="on" index='0'>充话费</a>
        <a href="#" index='1'>充流量</a>
        <a href="#" index='2'>充固话</a>
        <a href="#" index='3' style="border-right: solid 1px #FF4400;">充宽带</a>

        <div class="clear"></div>

        <div class="content" style="display:block;">
            <img src="images/1.png" />
        </div>
        <div class="content">
            <img src="images/2.png" />
        </div>
        <div class="content">
            <img src="images/3.png" />
        </div>

        <div class="content">
            <img src="images/4.png" />
        </div>
    </div>
    <script>
        var as = document.getElementsByTagName('a'); // 四个选项
        var divs = document.getElementsByClassName('content');
        // 循环给每个选项绑定单击事件
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                // 当前自己设置背景色 其他选项移除
                // 排他思想 先全部移除 之后对自己设置
                for (var j = 0; j < as.length; j++) {
                    as[j].className = '';
                    divs[j].style.display = 'none';
                }
                this.className = 'on';
                // 其次 让对应内容显示 其他全部隐藏
                /*
                for(var k=0; k<divs.length; k++) {
                	divs[k].style.display = 'none';
                }
                */
                //getAttribute()用于获取自定义属性，如class类就是非自定义属性
                divs[this.getAttribute('index')].style.display = 'block';
            }
        }
 <script>

越努力越

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习：选项卡

选项卡根据点击事件调取不同的选项<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>选项卡</title> <style type="text/css"> * { margin:...
复制链接

扫一扫