JavaScript实现tab栏切换效果

网络编程 2024/12/24 佚名

3 1 2

本文实例为大家分享了JavaScript实现tab栏切换效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
  <!-- css样式 -->
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  .box {
   width: 600px;
   margin: 100px 500px;
   border: 1px solid #999;
  }
  li {
   list-style: none;
  }
  .tab_top {
   width: 600px;
   height: 50px;
   background-color: #ccc;
  }
  .tab_top li {
   float: left;
   width: 50px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   padding: 0 20px;
  }
  .current {
   background-color: red;
   color: #fff;
  }
  .tab_con {
   width: 600px;
   height: 300px;
   background-color: #fff;
  }
  先在css里面设置下面小div全部隐藏
  .item {
   display: none
  }
 </style>
 <!-- html结构 -->
 <body>
 <div class="box">
  <div class="tab_top">
   <ul>
    <li class="current">标题一</li>
    <li>标题二</li>
    <li>标题三</li>
    <li>标题四</li>
    <li>标题五</li>
   </ul>
  </div>
  <div class="tab_con">
   <div class="item" style="display: block;"> --->此处默认第一个显示
    我是内容一<br>
    我是内容一<br>
    我是内容一<br>
    我是内容一<br>
    我是内容一<br>
   </div>
   <div class="item">
    我是内容二<br>
    我是内容二<br>
    我是内容二<br>
    我是内容二<br>
    我是内容二<br>
   </div>
   <div class="item">
    我是内容三<br>
    我是内容三<br>
    我是内容三<br>
    我是内容三<br>
    我是内容三<br>
   </div>
   <div class="item">
    我是内容四<br>
    我是内容四<br>
    我是内容四<br>
    我是内容四<br>
    我是内容四<br>
   </div>
   <div class="item">
    我是内容五<br>
    我是内容五<br>
    我是内容五<br>
    我是内容五<br>
    我是内容五<br>
    我是内容五<br>
   </div>
  </div>
 </div>
</body>

js:

<script>
 //1 上的选项卡 点击某一个 当前这一个底色是红色 其余不变 （排他思想） 修改类名的方法
 //获取元素
 //01 获取上半部分盒子
 var tab_top = document.querySelector('.tab_top');
 //02 获取上班部分 所有小li 得到一个数组
 var lis = tab_top.querySelectorAll('li');
 //03 获取下半部分 所有小div盒子 得到一个数组
 var item = document.querySelectorAll('.item')
 //for 循环所有小li 绑定点击事件
 for (var i = 0; i < lis.length; i++) {
  //开始给上面li设置索引号 属性index 值 i 
  lis[i].setAttribute('index', i);
  // 注册点击事件
  lis[i].onclick = function () {
   // 来个排他思想
   for (var j = 0; j < lis.length; j++) {
    //先让所有的li 点击没有样式
    lis[j].className = '';
   }
   // 谁点击 谁加样式
   this.className = 'current'
   //2 下面显示内容模块也要写在onclick里面 因为一一对应
   // 给上面top 所有li 添加index 索引号 属性从0开始 自定义属性

   // 上面已经设置好 现在拿来用
   var index = this.getAttribute('index');
   // 点击上面li 对应下面div显示出来
   //再来排他思想 先干掉其他人 让隐藏 点谁 谁显示
   for (var k = 0; k < item.length; k++) {
    //所有的小div 隐藏
    item[k].style.display = 'none'
   }
   //点击哪个小li 小li的index对应的div 显示
   item[index].style.display = 'block';

  }

 }

</script>

效果图：

如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,tab,切换

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JavaScript实现tab栏切换效果”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月24日

JavaScript实现tab栏切换效果

JS函数本身的作用域实例分析

vue-cli3使用mock数据的方法分析

评论“JavaScript实现tab栏切换效果”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接