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

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

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

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

<!DOCTYPE html>
<html>
<head>
  <title>www.dhdzp.com tab點擊切換</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在線運行測試工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下測試運行效果：

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

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

JavaScript版經(jīng)典游戲之掃雷游戲完整示例【附demo源碼下載】
這篇文章主要介紹了JavaScript版經(jīng)典游戲之掃雷游戲?qū)崿F(xiàn)方法,結(jié)合完整實例形式分析了掃雷游戲的原理與具體實現(xiàn)流程,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-12-12
一文帶你了解JavaScript垃圾回收機制
JS自帶一套內(nèi)存管理引擎,負責創(chuàng)建對象、銷毀對象,以及垃圾回收,下面這篇文章主要給大家介紹了關于JavaScript垃圾回收機制的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2021-11-11
鴻蒙JS實戰(zhàn)之計算器功能開發(fā)實例
這篇文章主要給大家介紹了關于鴻蒙Js實戰(zhàn)之計算器功能開發(fā)的相關資料,計算器是我們生活中經(jīng)常使用的應用,此項目是基于Harmony實現(xiàn)的簡易計算器,需要的朋友可以參考下
2024-02-02
js中map()函數(shù)的使用案例詳解
map()方法定義在JavaScript的Array中，它返回一個新的數(shù)組，數(shù)組中的元素為原始數(shù)組調(diào)用函數(shù)處理后的值，這篇文章主要介紹了js中map()函數(shù)的使用,需要的朋友可以參考下
2022-11-11
js實現(xiàn)的修改div里img標簽的src屬性
js實現(xiàn)的修改div里img標簽的src屬性...
2007-09-09
JavaScript 實現(xiàn)繼承的幾種方式
這篇文章主要介紹了JavaScript 實現(xiàn)繼承的幾種方式，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2021-02-02
js代碼驗證手機號碼和電話號碼是否合法
這篇文章主要介紹了js代碼驗證手機號碼和電話號碼是否合法，手機號碼和電話號碼在某些網(wǎng)站都是必填項，為了提高用戶體驗度，一般要進行合法性校驗的,需要的朋友可以參考下
2015-07-07
layui實現(xiàn)點擊按鈕給table添加一行
想實現(xiàn)點擊按鈕在表格添加一行的功能，但發(fā)現(xiàn)layui并未集成該工具欄，因此，需要自己手動添加這個功能；這篇文章主要介紹了layui點擊按鈕給table添加一行,需要的朋友可以參考下
2018-08-08
探討javascript是不是面向?qū)ο蟮恼Z言
這篇文章主要是介紹了javascript是不是面向?qū)ο蟮恼Z言。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
js拼接字符串時如何在中間加上空格
這篇文章主要介紹了js拼接字符串時如何在中間加上空格的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09