js 排他思想和选项卡案例

最新推荐文章于 2022-11-10 21:25:35 发布

海龟先生plus

最新推荐文章于 2022-11-10 21:25:35 发布

阅读量307

点赞数

分类专栏： js 文章标签： js 选项卡排他思想

本文链接：https://blog.csdn.net/qq_45219069/article/details/94402007

版权

js 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

    *{
        margin: 0px;
        padding: 0px;
    }
    .box{
        width: 500px;
        height: 400px;
        margin: 80px auto;
        border: 1px solid;
    }
    .box .up{
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-around;;
    }
    .box .up span{
        width: 80px;
        background-color: coral;
        text-align: center;
        cursor: pointer;
    }
    .box .content{
        height: 370px;
    }
    .box .content div{
        height: 370px;
        background-color: gold;
        text-align: center;
        line-height: 370px;
        font-size: 30px;
        color: green;
        display: none;
    }
    .box .up .bg{
        background-color: chartreuse;
    }
</style>
<body>
<div class="box">
    <div class="up">
        <span>股票</span>
        <span>理财</span>
        <span>金融</span>
        <span>风投</span>
        <span>保险</span>
    </div>
    <div class="content">
        <div style="display:block">我是股票</div>
        <div>我是理财</div>
        <div>我是金融</div>
        <div>我是风投</div>
        <div>我是保险</div>
    </div>
</div>
  <script>
    //获取元素
    var spans=document.querySelector(".up")
    var pans=spans.children
    var divs=document.querySelector(".content")
    var dvs=divs.children
    //绑定事件
    for(var i=0;i<pans.length;i++){ //5个按钮 ，我们点按钮的时候都弹出一个事件，来个遍历，给每个按钮绑定事件
        pans[i].index=i//把span的下标赋值给div,因为div改变属性也是事件调用的，
                       //需要用this指明，这里用span 的下标值（被this过）赋值来使用
        pans[i].onclick=function(){ //绑定事件，用排他思想，为什么？我们的需求是点击按钮，出现效果，
                                    //点另外一个按钮时候，之前那个按钮恢复过去，即点的时候有样式，不点的时候没有
                                    //所以排他，先干掉所有的样式，包括自己，点击的时候在重新复制
          for(var j=0;j<pans.length;j++){
              pans[j].className=""          //排他，清除按钮类名和div的样式
              dvs[j].style.display="none"
          }                              //开始赋值，this---事件调用函数，并且在循环里，会先循环完。在执行函数
       this.className="bg"               //所以用this指向事件调用者 
       dvs[this.index].style.display="block"
        }
    }
    
</script>

海龟先生plus

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 排他思想和选项卡案例

<style> *{ margin: 0px; padding: 0px; } .box{ width: 500px; height: 400px; margin: 80px auto; border: 1px solid; } .box ....
复制链接

扫一扫