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

2024-09-28 19:56:33

如下所示：

<!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切换效果(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学
浅谈react.js中实现tab吸顶效果的问题

在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam
原生js实现tab选项卡切换

本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分 <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre
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
JS封装的选项卡TAB切换效果示例

本文实例讲述了JS封装的选项卡TAB切换效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>JS封装的选项卡TAB代码</title> <style type="text/css"> *{ padding:0; margin:0;}
js实现tab切换效果实例

直接先来个真相吧: [HTML代码] <div id="menu">  <ul id="nav"> <li><a href="#" class="selected">tab1</a></li> <li><a href="#" class="">tab2&
JS简单实现tab切换效果的多窗口显示功能

本文实例讲述了JS简单实现tab切换效果的多窗口显示功能.分享给大家供大家参考,具体如下: <div style=" text-align:center; margin-top:40px;"> <div class="menubox"> <span id="newstab1" class="hover" onmouseover="setTab('newstab',1,3)"&g
JS实现简单的tab切换选项卡效果

本文实例讲述了JS实现简单的tab切换选项卡效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <m
Vue.js实现tab切换效果

Vue是一个小巧轻便的JavaScript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 目前在学习Vue.js.在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据驱动,不需要手动操作DOM.他通过一些特殊的hmtl语法,将DOM和数据绑定起来.一旦创建了绑定,DOM就会和数据保持同步,每当变更了数据,DOM也会相应的发生改变,更新. 下面是我用vue.js来实现的tab切换功能. <!--这里
vue使用动态组件实现TAB切换效果

问题描述 tab切换的场景在开发中会经常用到.当需要实现这种效果的时候,我们常常会想到下面的方式去实现这个效果. 方式一使用display:none;去控制dom元素的显示与隐藏.从而实现,两个tab的显示与隐藏.不过如果有三四个tab要切换的话,这种方式就不可取了. 方式二使用vue中的指令v-if或者v-show实现.这种方式可以实现,不过代码写的不优雅.试想一个.vue文件中出现一大把v-if是什么样的效果?而且使用v-if还得声明很多的变量去做标识.所以不是十分好的的解决方案方式三
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】

本文实例讲述了JS实现图文并茂的tab选项卡效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h
js图片轮播手动切换效果

利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot
基于vue-cli 路由实现类似tab切换效果（vue 2.0）

1,更改main.js 2,在App.vue中,写入两个跳转链接(router-link),分别跳转到"home""About" (home.About即分别是两个组件) ----其中,为什么要使用<router-link></router-link>, 请移步:http://router.vuejs.org/zh-cn/api/router-link.html ----router-view路由视图(必须) ----css可以使用外部样式

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

相关推荐

随机推荐