JS实现图文并茂的tab选项卡效果示例【附demo源码下载】


Posted in Javascript onSeptember 21, 2016

本文实例讲述了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>

运行效果图如下:

JS实现图文并茂的tab选项卡效果示例【附demo源码下载】

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

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

Javascript 相关文章推荐
jQuery html()等方法介绍
Nov 18 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
Javascript中replace()小结
Sep 30 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
vue双花括号的使用方法 附练习题
Nov 07 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 #Javascript
D3.js实现折线图的方法详解
Sep 21 #Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 #Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 #Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 #Javascript
D3.js实现柱状图的方法详解
Sep 21 #Javascript
AngularJS ng-style中使用filter
Sep 21 #Javascript
You might like
php 什么是PEAR?(第二篇)
2009/03/19 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
json数据的列循环示例
2013/09/06 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
重阳节登山活动方案
2014/02/03 职场文书
努力工作保证书
2015/02/28 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫