JavaScript
搜索
分类

很棒的js Tab选项卡切换效果

作者：骑猪敲代码 时间：2024-02-23 14:42:30　

本文实例为大家分享了js Tab选项卡切换效果，供大家参考，具体内容如下


<!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
投稿

猜你喜欢

  • web 2.0设计指导之一:简单[译]

    2008-10-12 09:37:00

  • 通过javascript进行UTF-8编码的实现方法

    2024-04-16 10:39:49

  • Select下拉列表控件美化

    2008-11-12 12:55:00

  • python日志模块loguru详解

    2023-10-23 20:50:08

  • Python标准异常和异常处理详解

    2021-02-23 05:10:36

  • python使用Pandas库提升项目的运行速度过程详解

    2021-07-21 12:42:29

  • TensorFlow中tf.batch_matmul()的用法

    2022-06-06 10:33:37

  • JS轮播图实现简单代码

    2024-04-28 09:38:41

  • Jsp生成页面验证码的方法[附代码]

    2023-06-25 07:46:42

  • 用正则表达式表示不包含2950的字符串

    2010-03-02 22:10:00

  • Python提取PDF指定内容并生成新文件

    2022-11-09 19:44:00

  • python实现测试工具（一）——命令行发送get请求

    2022-04-06 03:49:00

  • 用户"sa"登陆失败 SQLServer 错误18456的解决方法

    2024-01-18 18:04:37

  • 淘宝首页代码调整

    2011-04-22 12:44:00

  • Python jiaba库的使用详解

    2022-05-11 22:20:46

  • 关于php开启错误提示的总结

    2023-11-04 10:46:21

  • Python的Django框架中的select_related函数对QuerySet 查询的优化

    2022-09-02 06:06:46

  • sql查询点滴记录

    2012-01-05 19:07:49

  • python使用xlrd模块读写Excel文件的方法

    2022-02-14 16:54:55

  • ORACLE常见错误代码的分析与解决（二）

    2024-01-21 16:37:29
    • asp之家 网络编程 m.aspxhome.com