快捷導(dǎo)航

JavaScript實(shí)現(xiàn)的簡(jiǎn)單Tab點(diǎn)擊切換功能示例

更新時(shí)間：2018年07月06日 14:46:24 作者：h5css3_linhuai

這篇文章主要介紹了JavaScript實(shí)現(xiàn)的簡(jiǎn)單Tab點(diǎn)擊切換功能,涉及JavaScript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)的簡(jiǎn)單Tab點(diǎn)擊切換功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html>
<head>
  <title>www.dbjr.com.cn tab點(diǎn)擊切換</title>
  <style type="text/css">
  *{
    padding: 0;
    margin: 0;
  }
  #example{
    width: 500px;
    height: 400px;
    margin: 0 auto;
  }
  #example .hd ul li{
    display: inline-block;
    width: 32%;
    height: 36px;
    line-height: 36px;
    border-radius: 5px;
    background-color: #333;
    text-align: center;
    color: #fff;
  }
  #example .hd ul li.current{
    background-color: green;
  }
  #example .bd{
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  #example .bd ul li{
    display: none;
  }
  #example .bd ul li.current{
    display: block;
  }
  </style>
</head>
<body>
  <div id="example">
    <div class="hd">
      <ul>
        <li class="current">Beijing</li>
        <li>Shanghai</li>
        <li>Guangzhou</li>
      </ul>
    </div>
    <div class="bd">
      <ul>
        <li class="current">This is Beijing!</li>
        <li>This is Shanghai</li>
        <li>This is Guangzhou</li>
      </ul>
    </div>
  </div>
  <script type="text/javascript">
  var hd = document.getElementsByClassName("hd")[0].getElementsByTagName("li");
  var bd = document.getElementsByClassName("bd")[0].getElementsByTagName("li");
  for (var i = 0; i < hd.length; i++) {
    hd[i].onclick = function(){
      doTabs(this);
    }
  }
  function doTabs(obj){
    for (var i = 0; i < hd.length; i++) {
      if(hd[i]==obj){
        hd[i].className = "current";
        bd[i].className = "current";
      }else{
        hd[i].className = "";
        bd[i].className = "";
      }
    }
  }
  </script>
</body>
</html>

使用本站HTML/CSS/JS在線運(yùn)行測(cè)試工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下測(cè)試運(yùn)行效果：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

淺談layui使用模板引擎動(dòng)態(tài)渲染元素要注意的問(wèn)題
今天小編就為大家分享一篇淺談layui使用模板引擎動(dòng)態(tài)渲染元素要注意的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
JavaScript仿支付寶密碼輸入框
那么今天我就用JavaScript代碼來(lái)實(shí)現(xiàn)這個(gè)效果吧，那么首先介紹一下整個(gè)的思路，首先我們先將確定輸入密碼的位數(shù)，我的需求是5位，那么就用一個(gè)div標(biāo)簽包住5個(gè)input標(biāo)簽
2015-12-12
移動(dòng)端點(diǎn)擊態(tài)處理的三種實(shí)現(xiàn)方式
在移動(dòng)端開(kāi)發(fā)的時(shí)候，常常需要加點(diǎn)擊態(tài)，就是當(dāng)用戶點(diǎn)擊某個(gè)URL時(shí)，給相應(yīng)的標(biāo)簽添加按下效果樣式。這篇文章給大家分享了三種實(shí)現(xiàn)方法，包括偽類:active、webkit-tap-highlight-color和touch事件，下面來(lái)一起看看詳細(xì)的介紹吧。
2017-01-01
Javascript字符串瀏覽器兼容問(wèn)題分析
這篇文章主要介紹了Javascript字符串瀏覽器兼容問(wèn)題,實(shí)例形式對(duì)比分析了不兼容字符串與兼容字符串的區(qū)別,是非常實(shí)用的技巧,需要的朋友可以參考下
2014-12-12
小程序組件之仿微信通訊錄的實(shí)現(xiàn)代碼
這篇文章主要介紹了小程序組件之仿微信通訊錄的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
使用JS和canvas實(shí)現(xiàn)gif動(dòng)圖的停止和播放代碼
這篇文章主要介紹了使用JS和canvas實(shí)現(xiàn)gif動(dòng)圖的停止和播放代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-09-09
Next.js解決axios獲取真實(shí)ip問(wèn)題方法分析
這篇文章主要介紹了Next.js解決axios獲取真實(shí)ip問(wèn)題方法分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
JS庫(kù)之wow.js使用方法
近日，在做項(xiàng)目中，需要做到滾動(dòng)條滑到某個(gè)位置時(shí)，才能顯示動(dòng)畫(huà)，網(wǎng)上查詢到有個(gè)wow.js可以達(dá)到要求，現(xiàn)在把使用方法做如下總結(jié)，需要的朋友參考下吧
2017-09-09
原生JS實(shí)現(xiàn)風(fēng)箱式demo,并封裝了一個(gè)運(yùn)動(dòng)框架(實(shí)例代碼)
下面小編就為大家?guī)?lái)一篇原生JS實(shí)現(xiàn)風(fēng)箱式demo,并封裝了一個(gè)運(yùn)動(dòng)框架(實(shí)例代碼)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
JavaScript獲取路徑設(shè)計(jì)源碼
JavaScript獲取路徑的方法有很多，網(wǎng)上也可以搜索的到，下面本例也要為大家講解下，有源碼及結(jié)果截圖
2014-05-05