快捷導(dǎo)航

JS實(shí)現(xiàn)圖文并茂的tab選項(xiàng)卡效果示例【附demo源碼下載】

更新時(shí)間：2016年09月21日 09:49:13 作者：webdm

這篇文章主要介紹了JS實(shí)現(xiàn)圖文并茂的tab選項(xiàng)卡效果,涉及javascript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素屬性的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)圖文并茂的tab選項(xiàng)卡效果。分享給大家供大家參考，具體如下：

<!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打造的一個(gè)圖文并茂的選項(xiàng)卡代碼</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
//為選項(xiàng)卡的默認(rèn)值進(jìn)行設(shè)定，方法為讀取cardBar里面的li標(biāo)簽是否已經(jīng)有selected屬性，如果沒有則使用默認(rèn)值。
  function loadTab(){
      //讀取cardBar下面所有l(wèi)i標(biāo)簽
      var getId=document.getElementById("cardBar").getElementsByTagName("li");
      //定義一個(gè)判斷是否有selected的變量
      var selectedItems=0;
      //判斷方法，循環(huán)讀出li標(biāo)簽的className，如果有則selectedItems加1
      for(i=0;i<getId.length;i++){
        if (getId[i].className == "Selected"){
          selectedItems+=1;
        }
      }
      //經(jīng)過(guò)循環(huán)，如果selectedItems沒有數(shù)值，那么說(shuō)明沒有selected的標(biāo)簽，因此給標(biāo)簽加上默認(rèn)的className
      if (selectedItems==0){
        document.getElementById("cardBar").getElementsByTagName("li")[0].className="Selected";
        document.getElementById("Dcard1").style.display="block";
      }
    }
    //讓窗口打開就運(yùn)行他
    window.onload=loadTab;
    //設(shè)定結(jié)束
    //進(jìn)行選項(xiàng)卡效果的觸發(fā)
    function switchTab(cardBar,cardId){
      //讀取cardBar下面所有l(wèi)i標(biāo)簽
      var oItems = document.getElementById(cardBar).getElementsByTagName("li");
      //循環(huán)清空l(shuí)i標(biāo)簽下面的selected效果
      for (i=0;i<oItems.length;i++ ){
        var x=oItems[i];
        x.className="";
        var y=x.getElementsByTagName("a");
        y[0].style.color="#333";
      }
      //開始選項(xiàng)卡效果的賦值，為選中的li標(biāo)簽增加selected類的屬性
      document.getElementById(cardId).className="Selected";
      //讀出cardContent 下面的所有div標(biāo)簽
      var dvs=document.getElementById("cardContent").getElementsByTagName("div");
      //循環(huán)，判斷應(yīng)該顯示的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;}
  /*對(duì)點(diǎn)擊下欄顯示邊框的代碼進(jìn)行美化*/
  .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');">誰(shuí)伴我闖蕩</a></li>
   <li id="card5"><a href="#" title="" onclick="javascript:switchTab('cardBar','card5');">驕陽(yáng)歲月</a></li>
   <li id="card6"><a href="#" title="" onclick="javascript:switchTab('cardBar','card6');">吉他低泣時(shí)</a></li>
  </ul>
  <div id="cardContent">
    <div id="Dcard1" class="hackBox"><p><img src="images/165.jpg" alt="" />主流音樂對(duì)他來(lái)說(shuō)，不過(guò)是小菜一碟的牛刀小試，但一樣做得出色，而更多才華沒來(lái)得及表現(xiàn)就被區(qū)區(qū)三米距離斷送了。 家駒的夢(mèng)想不是成為一個(gè)斗士，而是要帶大家走入真實(shí)美妙豐富的音樂世界，一個(gè)祥和的境界。不少玩音樂的人自持清高，家駒卻不是，他對(duì)生命不亢不卑，用平視而不是俯視的眼光看一切，他追求精神上的高度，那怕看起來(lái)很渺茫，卻從不因此而背離世界，始終充滿著積極和真摯。</p></div>
    <div id="Dcard2" class="hackBox"><p><img src="images/009_165.jpg" alt="" />我不知道他們心中的家駒是什么樣，但我知道感動(dòng)是一樣的。屏幕上的家駒，穿著厚厚的大衣，抬起頭笑了，笑容仍如孩子，眼睛開始模糊，那刻真的非常希望，這個(gè)人能奇跡般地出現(xiàn)眼前。 BEYOND三子，不管多難過(guò)彷徨，時(shí)間會(huì)淡化，他們?nèi)匀挥袑氋F的生命，可以做想做的事情，看到日出日落，享受好吃的東西，延續(xù)各種故事。而家駒，還有著太多來(lái)不及實(shí)現(xiàn)的愿望，他不能再?gòu)椥膼鄣募荒芟硎芷匠５年?yáng)光空氣，和朋友笑談。 他永遠(yuǎn)只能在茫茫黑暗，眼睛無(wú)法睜開。 在視頻中看到家駒活蹦亂跳，總覺他還在人世，事實(shí)上他已經(jīng)沒有未來(lái)。 生命，真的辜負(fù)不起，誰(shuí)也不知道下一秒會(huì)發(fā)生什么，不抓緊一些事情，也許再?zèng)]機(jī)會(huì)了。 </p></div>
    <div id="Dcard3" class="hackBox"><p><img src="images/640.jpg" alt="" />他也很喜歡西方古典音樂，卡門，圓舞曲等都能以自己的方式純熟演繹。興趣和思維的廣泛讓他揮灑自如地寫出各種風(fēng)格的音樂。家駒最喜歡木吉它，如同武器一般帶著，隨時(shí)彈出咋現(xiàn)的靈感，未發(fā)表的幾百首作品，大半是用木吉它一柱一弦彈下來(lái)。古典吉他更是家駒的愛好，常穿插在歌曲或平時(shí)的SOLO中。有次隊(duì)友們激情澎湃地完成各自SOLO后，他一笑說(shuō)：我沒有他們那么強(qiáng)勁，我喜歡文靜些的。便拿著那把黑色木吉他，彈出一段西方古典味的音樂。</p></div>
    <div id="Dcard4" class="hackBox"><p><img src="images/165.jpg" alt="" />依然有人記得這個(gè)歌者：黃家駒。稱他為歌者并不是最適合，家駒曾在采訪中遇到這樣的問(wèn)題：為什么不當(dāng)獨(dú)立的歌手？他回答：對(duì)唱歌這種東西沒感覺，只對(duì)樂器才有感覺。確實(shí)如此，在BEYOND未進(jìn)歌壇前玩的是ART ROCK，那種盡情地用樂器把思緒發(fā)散的音樂，聽聽《腦部侵蝕》《大廈》就知道當(dāng)年他們玩得如此沉醉自由。 </p><p>十多年前的事，很多記得的只有片段。那時(shí)港臺(tái)的偶像歌手，青春組合轟炸著耳朵，簡(jiǎn)直是耳不遐接。有次聽了《灰色軌跡》，被深深觸動(dòng)了，開始注意BEYOND。當(dāng)時(shí)晚自習(xí)前有20分鐘用來(lái)唱歌，老師對(duì)此很有顧忌，最怕我們唱情歌，《真的愛你》風(fēng)靡時(shí)，老師一見這四個(gè)字，臉色發(fā)白，說(shuō)不要唱這種歌曲，后來(lái)解釋是送給母親的歌才通過(guò)。那時(shí)BEYOND在我心里除了歌外基本沒什么印象，而在高中歲月，BEYOND的歌聲陪伴了我三年。高中生活是我最辛苦，也是最懷念的時(shí)光。那段日子實(shí)在太苦了，競(jìng)爭(zhēng)激烈，壓力之大難以說(shuō)清。每天早上五點(diǎn)急急從家奔到教室，晚上早早趕來(lái)自修苦學(xué)是我全部的生活，沒有娛樂，沒有輕松。校長(zhǎng)每逢星期一都進(jìn)行全校訓(xùn)話，所說(shuō)的歸納只有一句：除了高考，任何事情與我們無(wú)關(guān)。這樣的環(huán)境令人一下子意味到人生很多東西，關(guān)于生存，關(guān)于競(jìng)爭(zhēng)，關(guān)于未來(lái)，關(guān)于理想。</p></div>
    <div id="Dcard5" class="hackBox"><p><img src="images/012al.jpg" alt="" />因?yàn)樵诖烁柚蟊闶羌覐?qiáng)首次試聲的《冷雨夜》。家駒的手足情深是令人最感動(dòng)的地方，讓人看到他想起這些的時(shí)候，不再只是心如鋼鐵，還有一份繞指柔。而家駒個(gè)性中最讓我欣賞的是那份剛正男兒血性。從遙遠(yuǎn)的《永遠(yuǎn)等待》《巨人》《誰(shuí)是勇敢》一直唱到生命結(jié)束前的《我是憤怒》《狂人山莊》，這些鏗鏘有力的歌是家駒個(gè)性上的張狂，他沉靜若處子，動(dòng)起來(lái)如脫兔。 </p><p>家駒尋覓過(guò)，只是他三十一年生命里，始終沒抹上這溫暖，沒有誰(shuí)陪他闖蕩，為他驅(qū)散寂寞痛楚，真遺憾。第一次聽《誰(shuí)伴我闖蕩》，記不清92年還是93年，在《笑看風(fēng)云》里，被逼辭職的包文龍木站在電梯里，林貞烈踏入的同時(shí)，《誰(shuí)伴我闖蕩》響起。這些畫面令我刻骨銘心記得，沒有方向感的包文龍走在冷雨飄忽的城市，伴著他的就是這首《誰(shuí)伴我闖蕩》和林貞烈。包文龍和林貞烈，是我對(duì)愛情的最完美想象，風(fēng)雨同舟，相濡以沫，沒有浪漫虛無(wú)的行為，有的是人生路上的溫暖相依，永遠(yuǎn)信任。</p></div>
    <div id="Dcard6" class="hackBox"><p><img src="images/165.jpg" alt="" />曾經(jīng)攻擊的人最后默認(rèn)了BEYOND為此付出的艱辛和所取得的成就不少人隨著變改常會(huì)忘記自己最初出發(fā)點(diǎn)，但家駒始終把持著，盡管有如此多的挫折，甚至為此失去生命。不管自己演出還是和別人一起演出，家駒從來(lái)不搶風(fēng)頭。除了早期較拘謹(jǐn)不自然，臺(tái)風(fēng)一直非常沉穩(wěn)。在他生命里，不管紅還是不紅，對(duì)音樂理想始終執(zhí)著，對(duì)朋友始終熱誠(chéng)。通利琴行是家駒早年常去練吉他的地方，那里的老板是當(dāng)年鼓勵(lì)家駒參加香港吉他大賽的人，就是在那個(gè)大賽，BEYOND開始展現(xiàn)才華。無(wú)論什么變遷，只要有BEYOND出現(xiàn)必然有通利琴行的贊助，一直到今天，從無(wú)變改。 </p></div>
  </div>
</div>
</body>
</html>

運(yùn)行效果圖如下：