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 相关文章推荐
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 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四大安全策略
2014/03/12 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
深入了解Django中间件及其方法
2019/07/26 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
基于python实现把图片转换成素描
2019/11/13 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python连接mongodb集群方法详解
2020/02/13 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
餐厅总经理岗位职责
2013/12/31 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
超市开店计划书
2014/04/26 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
书法社团活动总结
2015/05/07 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python