js中常用的Tab切换效果(推荐)

作者:jingxian 时间:2024-02-27 11:48:23 

如下所示:


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab</title>
 <style>
   *{margin:0; padding:0; list-style:none;}
   .box{
     width: 1000px;
     overflow: hidden;
     margin:100px auto 0px;
   }
   #title{
     line-height: 40px;
     background-color: rgb(247,247,247);
     font-size: 16px;
     font-weight: bold;
     color: rgb(102,102,102);
     overflow: hidden;
   }
   #title span{
     float: left;
     width: 166px;
     text-align: center;
   }
   #title span:hover{
     /*color: black;*/
     cursor: pointer;
   }
   #content{
     margin-top: 20px;
   }
   #content li{
     width: 1050px;
     overflow: hidden;
     display: none;
     background-color: rgb(247,247,247);
   }
   #content li div{
     width: 156px;
     margin-right: 14px;
     float: left;
     text-align: center;
   }
   #content li div a{
     font-size: 14px;
     color: black;
     line-height: 14px;
   /*  float: left;*/
   display: inline-block;
     margin-top: 10px;
   }
   #content li a:hover{
     color: #B70606;
   }
     #content li div span{
       font-size: 16px;
       line-height: 16px;
       /*float: left;*/
       display: block;
       color: rgb(102,102,102);
       margin-top: 10px;
     }
   #content img{
     float: left;
     width: 155px;
     height: 250px;
   }
   #title .select{
     background-color: rgb(10,167,112);
     color: white;
   }
   #content .show{
     display: block;
   }
 </style>
</head>
<body>
   <div class="box">
     <p id="title">
       <span class="select">帅哥</span>
       <span>美女</span>
       <span>宠物</span>
       <span>影视</span>
       <span>英雄联盟</span>
       <span>音乐</span>
     </p>
     <ul id="content">
       <li class="show">
         <div><img src="images/shuaige1.jpg" alt="帅哥1"><a href="#">杰森·史坦森</a><span>狂拽炫酷 * 炸天</span></div>
         <div><img src="images/shuaige2.jpg" alt="帅哥2"><a href="#">杰森·史坦森</a><span>狂拽炫酷 * 炸天</span></div>
         <div><img src="images/shuaige3.jpg" alt="帅哥3"><a href="#">汤姆·克鲁斯</a><span>高端大气上档次</span></div>
         <div><img src="images/shuaige4.jpg" alt="帅哥4"><a href="#">汤姆·克鲁斯</a><span>高端大气上档次</span></div>
         <div><img src="images/shuaige5.jpg" alt="帅哥5"><a href="#">卷福</a><span>低调奢华有内涵</span></div>
         <div><img src="images/shuaige6.jpg" alt="帅哥6"><a href="#">卷福</a><span>低调奢华有内涵</span></div>
       </li>
       <li>
         <div><img src="images/meinv1.jpg" alt="美女1"><a href="#">美女</a><span>外猛内柔女汉子</span></div>
         <div><img src="images/meinv2.jpg" alt="美女2"><a href="#">美女</a><span>外猛内柔女汉子</span></div>
         <div><img src="images/meinv3.jpg" alt="美女3"><a href="#">美女</a><span>卖萌嘟嘴剪刀手</span></div>
         <div><img src="images/meinv4.jpg" alt="美女4"><a href="#">美女</a><span>卖萌嘟嘴剪刀手</span></div>
         <div><img src="images/meinv5.jpg" alt="美女5"><a href="#">美女</a><span>时尚亮丽小清新</span></div>
         <div><img src="images/meinv6.jpg" alt="美女6"><a href="#">美女</a><span>时尚亮丽小清新</span></div>
       </li>
       <li>
         <div><img src="images/chongwu1.jpg" alt="宠物1"><a href="#">宠物</a><span>每只666块</span></div>
         <div><img src="images/chongwu2.jpeg" alt="宠物2"><a href="#">宠物</a><span>每只666块</span></div>
         <div><img src="images/chongwu3.jpg" alt="宠物3"><a href="#">宠物</a><span>每只666块</span></div>
         <div><img src="images/chongwu4.jpg" alt="宠物4"><a href="#">宠物</a><span>每只666块</span></div>
         <div><img src="images/chongwu5.jpg" alt="宠物5"><a href="#">宠物</a><span>每只666块</span></div>
         <div><img src="images/chongwu6.jpg" alt="宠物6"><a href="#">宠物</a><span>每只666块</span></div>
       </li>
       <li>
         <div><img src="images/yingshi1.jpg" alt="影视1"><a href="#">哈利波特系列</a><span>经典中的经典</span></div>
         <div><img src="images/yingshi2.jpg" alt="影视2"><a href="#">三傻大闹宝莱坞</a><span>看到泪崩</span></div>
         <div><img src="images/yingshi3.jpg" alt="影视3"><a href="#">变形金刚系列</a><span>过瘾过瘾过瘾</span></div>
         <div><img src="images/yingshi4.jpg" alt="影视4"><a href="#">千与千寻</a><span>梦中的小萝莉那么清新</span></div>
         <div><img src="images/yingshi5.jpeg" alt="影视5"><a href="#">龙猫</a><span>我的龙猫啊啊啊</span></div>
         <div><img src="images/yingshi6.jpg" alt="影视6"><a href="#">阿甘正传</a><span>阿甘还是那个阿甘</span></div>
       </li>
       <li>
         <div><img src="images/lol1.jpg" alt="lol1"><a href="#">寒冰射手</a><span>蛮王他媳妇</span></div>
         <div><img src="images/lol2.jpg" alt="lol2"><a href="#">黑暗之女</a><span>小萝莉一枚</span></div>
         <div><img src="images/lol3.jpg" alt="lol3"><a href="#">探险家</a><span>游戏中我最帅</span></div>
         <div><img src="images/lol4.jpg" alt="lol4"><a href="#">人马</a><span>上单大野全能</span></div>
         <div><img src="images/lol5.jpg" alt="lol5"><a href="#">提莫提百万</a><span>每天死亡百万次。。</span></div>
         <div><img src="images/lol6.jpg" alt="lol6"><a href="#">狼人</a><span>别给我放大</span></div>
       </li>
       <li>
         待开发。。。
       </li>
     </ul>
   </div>
   <script>
     var title=document.getElementById('title');
     var content=document.getElementById('content');
     var spans=title.getElementsByTagName('span');
     var lis=content.getElementsByTagName('li');
     for (var i = 0; i < spans.length; i++) {
       spans[i].index=i;
         spans[i].onclick=function(){
           for (var j = 0; j < spans.length; j++) {
             spans[j].className='';
             lis[j].className='';
           }
             this.className='select';
             lis[this.index].className='show';
         }
     }
   </script>
</body>
</html>

这段代码的关键处在最后的两个for遍历和this指针,第一个for遍历是为每一个span按钮添加点击事件,而第二个for遍历是确定当前点击的是哪个按钮,相应的内容部分就很好控制出现和隐藏了。

标签:js,tab,切换
0
投稿

猜你喜欢

  • 使用python实现正则匹配检索远端FTP目录下的文件

    2022-03-27 07:29:15
  • python等待10秒执行下一命令的方法

    2022-02-25 00:40:03
  • 详解vue事件对象、冒泡、阻止默认行为

    2024-04-28 09:26:19
  • 我所钟爱的HTML5资源

    2010-07-23 09:25:00
  • JDBC 连接MySQL实例详解

    2024-01-26 23:34:27
  • Python实现爬取并分析电商评论

    2022-11-21 17:18:47
  • MySQL Select语句是如何执行的

    2024-01-22 20:05:44
  • php strftime函数的详细用法

    2023-06-07 19:09:37
  • perl命令行参数内建数组@ARGV浅析

    2022-11-04 06:58:47
  • Django项目中表的查询的操作

    2023-04-23 10:22:23
  • Python实现读取及写入csv文件的方法示例

    2021-12-29 16:41:31
  • django中间键重定向实例方法

    2021-04-17 12:34:02
  • js实现单机双人象棋设计分析

    2008-05-20 12:57:00
  • 将数字转换成大写的人民币表达式的js函数

    2024-04-30 10:08:24
  • python自动化八大定位元素讲解

    2022-02-24 21:46:03
  • JS阻止事件冒泡的方法详解

    2023-09-10 08:57:36
  • 如何在python中实现线性回归

    2022-03-29 00:24:30
  • vbScript on error resume next容错使用心得

    2010-06-26 19:28:00
  • MySQL获取binlog的开始时间和结束时间(最新方法)

    2024-01-23 12:13:31
  • Python实现的拟合二元一次函数功能示例【基于scipy模块】

    2023-10-09 00:32:02
  • asp之家 网络编程 m.aspxhome.com