原生js选项卡

最新推荐文章于 2021-09-08 16:29:37 发布

from_shanghai

最新推荐文章于 2021-09-08 16:29:37 发布

阅读量244

点赞数

分类专栏：小练习复习

本文链接：https://blog.csdn.net/from_shanghai/article/details/97266449

版权

小练习同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

复习

1 篇文章 0 订阅

订阅专栏

button 行级元素

三个文本框，div，

一开始，第一个button就加上控制背景色的class，另两个button没有

而第一个文本框display设置成block 其他两个都是none

为每个button 绑定点击事件，这里要用立即函数（立即函数也是匿名函数）否则形成闭包

不然每个button 绑定不上onclick

当点击时候，利用 for循环，把每一个 button 和 div的类和 display 置空、设none

（就是把上一个效果移除）

移除用 xx.className="" 脚本化css .style.display="none"

oBtn[j].className="";
div[j].style.display="none";

并且利用 this 把当前 button 的类加上原理和移除时相似

this.className="active";
div[n].style.display="block";

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
       .active{
           background-color: yellow;
       }
       /*按钮变色的类*/
       .content{
           width: 200px;
           height: 200px;
           border:1px solid black;
           display: none;
       }

       /*display:none 有border也看不到*/
   </style>
</head>
<body>
       <button class="active">111</button>
       <button>222</button>
       <button>333</button>
       <div class="content" style="display: block">111</div>
       <div class="content">222</div>
       <div class="content">333</div>
   <script type="text/javascript">
       //第一步，先画出那个样子、布局
       //三个 button，外加三个 div
       //第二步，考虑实现功能：
       //比如 button点击时要变色
       //第三步，点击那个按钮就把对应的 div 的display值变成 block，点击的按钮要变色，并先把三个 div 和按钮的效果全清除

       var oBtn=document.getElementsByTagName("button");
       var div=document.getElementsByTagName("div");
       //获得一组，一组三个

       //给每个btn绑定点击事件
       for(var i=0; i<oBtn.length; i++){
           (function (n){
               oBtn[n].οnclick=function(){
                   for(var j=0; j<oBtn.length; j++){
                       oBtn[j].className="";
                       div[j].style.display="none";
                   }

               this.className="active";
               div[n].style.display="block";
           }
           }(i))
       }

       // 问题：怎么让div框中的字体居中
       // 怎么点击这个按钮，就对应到相应的 div框
       //
       // 不明白为什么绑定的时候要用立即函数
       // 消除效果时，不需要

       // tips:
       // 和按钮不同的是，预设是行间样式改变 display
   </script>
</body>
</html>