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

本文实例为大家分享了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遍历是确定当前点击的是哪个按钮,相应的内容部分就很好控制出现和隐藏了;

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

时间: 2016-08-29

JS基于myFocus库实现各种功能的tab选项卡切换效果

本文实例讲述了JS基于myFocus库实现各种功能的tab选项卡切换效果.分享给大家供大家参考.具体如下: 这里介绍使用myFocus-tab实现各种功能的选项卡切换,有的是带有动画效果的,各款基于myFocus库制作的焦点图风格皮肤,可自行按需选择,myFocus焦点图库及皮肤可自由使用,保留作者相关信息即可,谢谢支持!^^ 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-myfocus-plug-tab-cha-nav-codes/ 具

基于JavaScript实现Tab选项卡切换效果

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .box { width: 500px; height: 400px

分步解析JavaScript实现tab选项卡自动切换功能

本文分享一个能够实现自动切换的选项卡功能,并给出它的具体实现过程. 关于选项卡大家一定不会陌生,应用非常的频繁,通常选项卡都是需要点击或者划过才能够实现切换. 代码实例如下: <html> <head> <meta charset=" utf-8"> <title>tab切换</title> <style type="text/css"> body,h2,p{ margin:0px; paddi

原生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

原生javascript实现Tab选项卡切换功能

分析个人用原生JS获取类名元素的代码: 复制代码 代码如下: getByClassName:function(className,parent){             var elem = [],                 node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),               

基于javascript实现tab选项卡切换特效调试笔记

本文实例为大家分析了javascript实现tab选项卡切换的调试笔记,供大家参考,具体内容如下 制作导航栏,点击导航栏元素时下面的内容会产生相应的变化,并且该元素显示特殊样式. js源代码: //导航栏单击变换内容 function tabSwitch(_this,num) { var tag = document.getElementById("nav9"); var number = tag.getElementsByTagName("a"); //获取导航栏

js实现tab选项卡切换功能

话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; list-style: none; box-sizing: border-box; } .menu{ position: re

4种JavaScript实现简单tab选项卡切换的方法

本文实例讲解了4种JavaScript实现简单tab选项卡切换的方法,分享给大家供大家参考,具体内容如下 效果图: 方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换</title> <style type="text/cs

JavaScript实现简单的tab选项卡切换

本文实例讲解了JavaScript实现简单的tab选项卡切换的示例代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table切换</title> <style type="text/css"> *{ paddi

jQuery简单实现tab选项卡切换效果

抽空把公司项目上用的tab效果封装了一下,实在是需要用的地方太多了~~~ 效果图: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://apps

jQuery实现Tab选项卡切换效果简单演示

本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考.具体如下: 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box="#panel-

JS实现简单tab选项卡切换

本文实例为大家分享了JS实现简单tab选项卡切换的具体代码,供大家参考,具体内容如下 本人在上一篇文章也写了用JS来实现tab选项卡切换效果,但是上次的那个代码比较复杂,这次是简化版的. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab效果</title> <style type="

jQuery实现TAB选项卡切换特效简单演示

本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery tab切换</title> <style type="text/css"> *{ margin:0; pad

js实现Tab选项卡切换效果

本文实例为大家分享了js实现Tab选项卡切换效果展示的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="tab.css"> <script src="tab.js&quo