快捷導(dǎo)航

基于javascript實(shí)現(xiàn)tab切換特效

更新時(shí)間：2016年03月29日 16:38:43 作者：回憶沒了焦點(diǎn)

這篇文章主要介紹了基于javascript實(shí)現(xiàn)tab切換特效的相關(guān)資料,具有一定的參考價(jià)值，需要的朋友可以參考下

本文實(shí)例為大家分享了javascript實(shí)現(xiàn)tab切換特效代碼，供大家參考，具體內(nèi)容如下

效果圖：

實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="gb2312">
  <title>實(shí)踐題 - 選項(xiàng)卡</title>
  <style type="text/css">
    *{
      margin:0px;
      padding:0px;
    }
    #tab{
      margin:10px;
    }
    #tab ul{
      list-style:none;
      height:36px;
      border-bottom:2px solid black ;
      display:block;
    }
    #tab ul li{
      float:left;
      display:inline-block;
      padding:0px 15px;
      height:34px;
      line-height:34px;
      margin-right:5px;
      border:1px solid #ccc;
      border-bottom:none;
      cursor:pointer;
    }
    #tab div{
      padding:5px;
      border:1px solid #ccc;
      border-top:none;
      
    }
    #tab ul li.on{
      border-top:2px solid black;
      border-bottom: 2px solid white;
    }
    .hide{
      display:none;
    }
    
  </style>
  <script type="text/javascript">
    window.onload=function(){
     var mytab =document.getElementById("tab");
     var myul=mytab.getElementsByTagName("ul")[0];
     var myli=myul.getElementsByTagName("li");
     var mydiv=mytab.getElementsByTagName("div");
    // alert(mydiv.length)
     for(i=0,len=myli.length;i<len;i++){
       myli[i].index=i;
       myli[i].onclick=function(){
         for(var n=0;n<len;n++){
           myli[n].className="";
           mydiv[n].className="hide";
         }
         this.className="on";         
         mydiv[this.index].className="";
         
       }
     }
    }
   
  </script>
</head>
<body>
<!-- HTML頁(yè)面布局 -->
<div id="tab">
  <ul>
    <li class="on">房產(chǎn)</li>
    <li>家居</li>
    <li>二手房</li>
  </ul>
  <div>
     275萬購(gòu)昌平鄰鐵三居 總價(jià)20萬買一居
    200萬內(nèi)購(gòu)五環(huán)三居 140萬安家東三環(huán)
    北京首現(xiàn)零首付樓盤 53萬購(gòu)東5環(huán)50平
    京樓盤直降5000 中信府 公園樓王現(xiàn)房
  </div>
  <div class="hide">
    40平出租屋大改造 美少女的混搭小窩
   經(jīng)典清新簡(jiǎn)歐愛家 90平老房煥發(fā)新生
   新中式的酷色溫情 66平撞色活潑家居
   瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)
  </div>
  <div class="hide">
    通州豪華3居260萬 二環(huán)稀缺2居250w甩
   西3環(huán)通透2居290萬 130萬2居限量搶購(gòu)
   黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!
   獨(dú)家別墅280萬 蘇州橋2居優(yōu)惠價(jià)248萬
  </div>
</div>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Firefox下設(shè)為主頁(yè)的JavaScript代碼
在IE下，我們可以輕松使用以下代碼來實(shí)現(xiàn)設(shè)置主頁(yè) 但在firefox我們需要做的更多
2008-09-09
js的OOP繼承實(shí)現(xiàn)(必看篇)
下面小編就為大家?guī)硪黄猨s的OOP繼承實(shí)現(xiàn)(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
JavaScript定義類和對(duì)象的方法
這篇文章主要介紹了JavaScript定義類和對(duì)象的方法,分別以函數(shù)方式與Object類方式實(shí)現(xiàn),是javascript非常重要的技巧,需要的朋友可以參考下
2014-11-11
javascript替換已有元素replaceChild()使用介紹
這篇文章主要介紹了javascript替換已有元素replaceChild()使用,需要的朋友可以參考下
2014-04-04
JS實(shí)現(xiàn)數(shù)組簡(jiǎn)單去重及數(shù)組根據(jù)對(duì)象中的元素去重操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組簡(jiǎn)單去重及數(shù)組根據(jù)對(duì)象中的元素去重操作,涉及javascript數(shù)組元素的遍歷、判斷、追加等操作實(shí)現(xiàn)去重功能的相關(guān)技巧,需要的朋友可以參考下
2018-01-01
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法示例【二分查找法、計(jì)算重復(fù)次數(shù)】
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法,結(jié)合實(shí)例形式分析了二分查找法、計(jì)算重復(fù)次數(shù)相關(guān)算法原理與使用技巧,需要的朋友可以參考下
2019-02-02
JavaScript模塊規(guī)范之AMD規(guī)范和CMD規(guī)范
本篇文章給大家介紹js模塊規(guī)范之AMD規(guī)范和CMD規(guī)范，模塊化是一種處理復(fù)雜系統(tǒng)分解為代碼結(jié)構(gòu)更合理，可維護(hù)性更高的可管理的模塊的方式，對(duì)js amd cmd規(guī)范感興趣的童鞋可以來本文學(xué)習(xí)
2015-10-10
JS清除文本框內(nèi)容離開在恢復(fù)及鼠標(biāo)離開文本框時(shí)觸發(fā)js的方法
多網(wǎng)站的需要填寫的文本框在默認(rèn)狀態(tài)下都會(huì)給出一個(gè)默認(rèn)的提示語(yǔ)言，當(dāng)鼠標(biāo)點(diǎn)擊此文本框的時(shí)候能夠?qū)⒗锩娴哪J(rèn)文本清除，當(dāng)刪除輸入的文本且焦點(diǎn)離開文本框的時(shí)候再將默認(rèn)的文本寫入文本框
2016-01-01
簡(jiǎn)單了解Ajax表單序列化的實(shí)現(xiàn)方法
這篇文章主要介紹了簡(jiǎn)單了解Ajax表單序列化的實(shí)現(xiàn)方法,隨著Ajax的出現(xiàn)，表單序列化已經(jīng)成為一種需求,在學(xué)習(xí)原生Ajax時(shí),若用POST方法向后臺(tái)提交數(shù)據(jù)時(shí),就需要將表單序列化,需要的朋友可以參考下
2019-06-06
Cookie 注入是怎樣產(chǎn)生的
現(xiàn)在很多網(wǎng)站都加了防注入系統(tǒng)代碼，你輸入注入語(yǔ)句將無法注入~~感覺這樣的防注入系統(tǒng)不錯(cuò)，但防注入系統(tǒng)沒有注意到 Cookies 的問題！所以就有了Cookies注入~~
2009-04-04