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">
<head>
<meta charset="UTF-8">
<title>JS打造的一个图文并茂的选项卡代码</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
//为选项卡的默认值进行设定，方法为读取cardBar里面的li标签是否已经有selected属性，如果没有则使用默认值。
  function loadTab(){
      //读取cardBar下面所有li标签
      var getId=document.getElementById("cardBar").getElementsByTagName("li");
      //定义一个判断是否有selected的变量
      var selectedItems=0;
      //判断方法，循环读出li标签的className，如果有则selectedItems加1
      for(i=0;i<getId.length;i++){
        if (getId[i].className == "Selected"){
          selectedItems+=1;
        }
      }
      //经过循环，如果selectedItems没有数值，那么说明没有selected的标签，因此给标签加上默认的className
      if (selectedItems==0){
        document.getElementById("cardBar").getElementsByTagName("li")[0].className="Selected";
        document.getElementById("Dcard1").style.display="block";
      }
    }
    //让窗口打开就运行他
    window.onload=loadTab;
    //设定结束
    //进行选项卡效果的触发
    function switchTab(cardBar,cardId){
      //读取cardBar下面所有li标签
      var oItems = document.getElementById(cardBar).getElementsByTagName("li");
      //循环清空li标签下面的selected效果
      for (i=0;i<oItems.length;i++ ){
        var x=oItems[i];
        x.className="";
        var y=x.getElementsByTagName("a");
        y[0].style.color="#333";
      }
      //开始选项卡效果的赋值，为选中的li标签增加selected类的属性
      document.getElementById(cardId).className="Selected";
      //读出cardContent 下面的所有div标签
      var dvs=document.getElementById("cardContent").getElementsByTagName("div");
      //循环，判断应该显示的div
      for (i=0;i<dvs.length;i++ ){
        if (dvs[i].id==("D"+cardId)){
          dvs[i].style.display="block";
        }else{
          dvs[i].style.display="none";
        }
      }
    }
  //--><!]]></script>
  <style type="text/css">
  <!--/*--><![CDATA[/*><!--*/
  body {margin:0 auto;padding:0;font:62.5%/2em "MingLiu" Arial;text-align:center;}
  img, a img {border:0;display:block;}
  .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
  .clearfix {display:inline-block;}
  /* Hides from IE-mac \*/
  * html .clearfix {height:1%;}
  .clearfix {display:block;}
  /* End hide from IE-mac */
  .tab {width:50%;margin:0 auto;}
  .nav, .nav li a, .hackBox {list-style:none;border:1px solid #ccc;}
  .nav {position:relative;margin:1em 0 0;border-width:0 0 1px;}
  .nav li {float:left;margin:0 .3em;}
  .nav li a {position:relative;display:block;float:left;margin:0 0 -1px;padding:0 .8em;background:#eee;color:#666;font-size:1.1em;line-height:1.8em;text-decoration:none;}
  /*- .nav li a:hover, -*/ .nav li.Selected a {border-bottom-color:#fff;background:#fff;color:#000;line-height:2em;}
  /*对点击下栏显示边框的代码进行美化*/
  .hackBox {display:none;padding:1em 0 0;border-width:0 1px 1px;}
  .hackBox p {margin:0 1em 1em;color:#333;font-size:1.1em;text-align:left;}
  .hackBox img {float:left;width:100px;margin:0 .8em .4em 0;}
  /*]]>*/-->
  </style>
</head>
<body>
<div class="tab">
  <ul class="nav clearfix" id="cardBar">
   <li id="card1"><a href="#" title="" onclick="javascript:switchTab('cardBar','card1');">生死的轮回</a></li>
   <li id="card2"><a href="#" title="" onclick="javascript:switchTab('cardBar','card2');">逝去的吉他</a></li>
   <li id="card3"><a href="#" title="" onclick="javascript:switchTab('cardBar','card3');">解读黄家驹</a></li>
   <li id="card4"><a href="#" title="" onclick="javascript:switchTab('cardBar','card4');">谁伴我闯荡</a></li>
   <li id="card5"><a href="#" title="" onclick="javascript:switchTab('cardBar','card5');">骄阳岁月</a></li>
   <li id="card6"><a href="#" title="" onclick="javascript:switchTab('cardBar','card6');">吉他低泣时</a></li>
  </ul>
  <div id="cardContent">
    <div id="Dcard1" class="hackBox"><p><img src="images/165.jpg" alt="" />主流音乐对他来说，不过是小菜一碟的牛刀小试，但一样做得出色，而更多才华没来得及表现就被区区三米距离断送了。 家驹的梦想不是成为一个斗士，而是要带大家走入真实美妙丰富的音乐世界，一个祥和的境界。不少玩音乐的人自持清高，家驹却不是，他对生命不亢不卑，用平视而不是俯视的眼光看一切，他追求精神上的高度，那怕看起来很渺茫，却从不因此而背离世界，始终充满着积极和真挚。</p></div>
    <div id="Dcard2" class="hackBox"><p><img src="images/009_165.jpg" alt="" />我不知道他们心中的家驹是什么样，但我知道感动是一样的。屏幕上的家驹，穿着厚厚的大衣，抬起头笑了，笑容仍如孩子，眼睛开始模糊，那刻真的非常希望，这个人能奇迹般地出现眼前。 BEYOND三子，不管多难过彷徨，时间会淡化，他们仍然有宝贵的生命，可以做想做的事情，看到日出日落，享受好吃的东西，延续各种故事。而家驹，还有着太多来不及实现的愿望，他不能再弹心爱的吉他，不能享受平常的阳光空气，和朋友笑谈。 他永远只能在茫茫黑暗，眼睛无法睁开。 在视频中看到家驹活蹦乱跳，总觉他还在人世，事实上他已经没有未来。 生命，真的辜负不起，谁也不知道下一秒会发生什么，不抓紧一些事情，也许再没机会了。 </p></div>
    <div id="Dcard3" class="hackBox"><p><img src="images/640.jpg" alt="" />他也很喜欢西方古典音乐，卡门，圆舞曲等都能以自己的方式纯熟演绎。兴趣和思维的广泛让他挥洒自如地写出各种风格的音乐。家驹最喜欢木吉它，如同武器一般带着，随时弹出咋现的灵感，未发表的几百首作品，大半是用木吉它一柱一弦弹下来。古典吉他更是家驹的爱好，常穿插在歌曲或平时的SOLO中。有次队友们激情澎湃地完成各自SOLO后，他一笑说：我没有他们那么强劲，我喜欢文静些的。便拿着那把黑色木吉他，弹出一段西方古典味的音乐。</p></div>
    <div id="Dcard4" class="hackBox"><p><img src="images/165.jpg" alt="" />依然有人记得这个歌者：黄家驹。称他为歌者并不是最适合，家驹曾在采访中遇到这样的问题：为什么不当独立的歌手？他回答：对唱歌这种东西没感觉，只对乐器才有感觉。确实如此，在BEYOND未进歌坛前玩的是ART ROCK，那种尽情地用乐器把思绪发散的音乐，听听《脑部侵蚀》《大厦》就知道当年他们玩得如此沉醉自由。 </p><p>十多年前的事，很多记得的只有片段。那时港台的偶像歌手，青春组合轰炸着耳朵，简直是耳不遐接。有次听了《灰色轨迹》，被深深触动了，开始注意BEYOND。当时晚自习前有20分钟用来唱歌，老师对此很有顾忌，最怕我们唱情歌，《真的爱你》风靡时，老师一见这四个字，脸色发白，说不要唱这种歌曲，后来解释是送给母亲的歌才通过。那时BEYOND在我心里除了歌外基本没什么印象，而在高中岁月，BEYOND的歌声陪伴了我三年。高中生活是我最辛苦，也是最怀念的时光。那段日子实在太苦了，竞争激烈，压力之大难以说清。每天早上五点急急从家奔到教室，晚上早早赶来自修苦学是我全部的生活，没有娱乐，没有轻松。校长每逢星期一都进行全校训话，所说的归纳只有一句：除了高考，任何事情与我们无关。这样的环境令人一下子意味到人生很多东西，关于生存，关于竞争，关于未来，关于理想。</p></div>
    <div id="Dcard5" class="hackBox"><p><img src="images/012al.jpg" alt="" />因为在此歌之后便是家强首次试声的《冷雨夜》。家驹的手足情深是令人最感动的地方，让人看到他想起这些的时候，不再只是心如钢铁，还有一份绕指柔。而家驹个性中最让我欣赏的是那份刚正男儿血性。从遥远的《永远等待》《巨人》《谁是勇敢》一直唱到生命结束前的《我是愤怒》《狂人山庄》，这些铿锵有力的歌是家驹个性上的张狂，他沉静若处子，动起来如脱兔。 </p><p>家驹寻觅过，只是他三十一年生命里，始终没抹上这温暖，没有谁陪他闯荡，为他驱散寂寞痛楚，真遗憾。第一次听《谁伴我闯荡》，记不清92年还是93年，在《笑看风云》里，被逼辞职的包文龙木站在电梯里，林贞烈踏入的同时，《谁伴我闯荡》响起。这些画面令我刻骨铭心记得，没有方向感的包文龙走在冷雨飘忽的城市，伴着他的就是这首《谁伴我闯荡》和林贞烈。包文龙和林贞烈，是我对爱情的最完美想象，风雨同舟，相濡以沫，没有浪漫虚无的行为，有的是人生路上的温暖相依，永远信任。</p></div>
    <div id="Dcard6" class="hackBox"><p><img src="images/165.jpg" alt="" />曾经攻击的人最后默认了BEYOND为此付出的艰辛和所取得的成就不少人随着变改常会忘记自己最初出发点，但家驹始终把持着，尽管有如此多的挫折，甚至为此失去生命。不管自己演出还是和别人一起演出，家驹从来不抢风头。除了早期较拘谨不自然，台风一直非常沉稳。在他生命里，不管红还是不红，对音乐理想始终执着，对朋友始终热诚。通利琴行是家驹早年常去练吉他的地方，那里的老板是当年鼓励家驹参加香港吉他大赛的人，就是在那个大赛，BEYOND开始展现才华。无论什么变迁，只要有BEYOND出现必然有通利琴行的赞助，一直到今天，从无变改。 </p></div>
  </div>
</div>
</body>
</html>

运行效果图如下：

完整实例代码点击此处本站下载。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。