网页特效之tab栏切换

最新推荐文章于 2023-03-09 19:20:29 发布

枫雨血痕

最新推荐文章于 2023-03-09 19:20:29 发布

阅读量1.3k

点赞数

分类专栏：前端 javascript 文章标签： tab栏切换网页特效 JavaScript

本文链接：https://blog.csdn.net/lyxuefeng/article/details/81149847

版权

前端同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

javascript

40 篇文章 1 订阅

订阅专栏

思路：使用排他思想，每当鼠标移动到一个tab选项卡时，清空所有选项卡类名，然后给当前选项卡添加类名，达到使对应的tab内容显示的目的。
关键知识：排他思想，for循环中使用自定义索引属性index得到i
具体代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tab栏切换</title>
  <style type="text/css">
      .main {
          width: 400px;
          margin:100px auto;
          border: 1px solid #ccc;
      }
      .box {
          width: 400px;
      }
    .current {
        background-color: #678989;
    }
    .box div {
        width: 100%;
        height: 200px;
        background: #5050ff;
        display: none;
        text-align: center;
        color:#fff;
    }
  </style>
</head>
<body>
    <div class="main">
        <div id="content">
            <button>按钮1</button>
            <button>按钮2</button>
            <button>按钮3</button>
            <button>按钮4</button>
            <button>按钮5</button>
         </div>
         <div id="box" class="box">
              <div style="display: block;">1号盒子</div>
              <div>2号盒子</div>
              <div>3号盒子</div>
              <div>4号盒子</div>
              <div>5号盒子</div>
         </div>
    </div>
  
</body>
<script type="text/javascript">
    var btns = document.getElementById('content').getElementsByTagName('button');
    var boxs = document.getElementById('box').getElementsByTagName('div');
    console.log(btns);
    console.log(boxs);
    for(var i=0;i<btns.length;i++){
        btns[i].index = i;//获取当前索引
        btns[i].onmouseover = function(){
            //清空所有类名
            for(var j=0;j<btns.length;j++){
                btns[j].className = '';
            }
            //给当前赋类名
            this.className = 'current';
            //隐藏所有盒子
            for(var k=0;k<boxs.length;k++){
                boxs[k].style.display = 'none';
            }
            //显示对应当前索引的盒子
            boxs[this.index].style.display = 'block';
        }

    }
</script>
</html>

具体效果可见：

tab栏切换

多个盒子tab栏切换

枫雨血痕

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
网页特效之tab栏切换

思路：使用排他思想，每当鼠标移动到一个tab选项卡时，清空所有选项卡类名，然后给当前选项卡添加类名，达到使对应的tab内容显示的目的。关键知识：排他思想，for循环中使用自定义索引属性index得到i具体代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title...
复制链接

扫一扫