快捷導(dǎo)航

JS實(shí)現(xiàn)的簡(jiǎn)單tab切換功能完整示例

更新時(shí)間：2019年06月20日 10:46:07 作者：longzhoufeng

這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單tab切換功能,結(jié)合完整實(shí)例形式分析了javascript基于事件響應(yīng)實(shí)現(xiàn)頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.fzitv.net tab切換</title>
  <style>
    * {
      padding: 0;
      margin: 0
    }
    body {
      font-size: 12px
    }
    ul, li, ol {
      list-style: none
    }
    a {
      text-decoration: none
    }
    .clearfix {
      clear: both;
      overflow: hidden
    }
    .tab_title ul li {
      float: left;
      padding: 0 10px
    }
  </style>
</head>
<body>
<div id="Tab1" class="tab clearfix">
  <div class="tab_title clearfix">
    <ul>
      <li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',1,3)" id="one1">TAB1</a></li>
      <li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',2,3)" id="one2">TAB2</a></li>
      <li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',3,3)" id="one3">TAB3</a></li>
    </ul>
  </div>
  <div class="tab_details clearfix">
    <div id="con_one_1" style="display: block;">con_one_1</div>
    <div style="display: none;" id="con_one_2">con_one_2</div>
    <div style="display: none;" id="con_one_3">con_one_3</div>
  </div>
</div>
<script type="text/javascript">
  //tab切換效果
  function setTab(name, cursel, n) {
    for(var i = 1; i <= n; i++) {
      var menu = document.getElementById(name + i);
      var con = document.getElementById("con_" + name + "_" + i);
      menu.className = i == cursel ? "cur" : "";
      con.style.display = i == cursel ? "block" : "none";
    }
  }
</script>
</body>
</html>

運(yùn)行結(jié)果：

感興趣的朋友可以使用本站在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun，測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《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ì)有所幫助。

您可能感興趣的文章:

JS
tab切換

相關(guān)文章

微信小程序?qū)崿F(xiàn)獲取用戶(hù)信息并存入數(shù)據(jù)庫(kù)操作示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)獲取用戶(hù)信息并存入數(shù)據(jù)庫(kù)操作,涉及微信小程序wx.request后臺(tái)數(shù)據(jù)交互及php數(shù)據(jù)存儲(chǔ)相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
js禁止查看源文件屏蔽Ctrl+u/s、F12、右鍵等兼容IE火狐c(diǎn)hrome
最近想給JS特效與模板預(yù)覽頁(yè)面加上屏蔽查看源文件，防治整理不易的源碼被輕易拿走，發(fā)現(xiàn)IE、火狐、chrome等各類(lèi)瀏覽器支持不一樣。下面是腳本之家整理的一些屏蔽總結(jié)
2020-10-10
JQuery 表格操作(交替顯示、拖動(dòng)表格行、選擇行等)
JQuery 表格操作包括交替顯示、拖動(dòng)表格行、選擇行等功能，大家可以參考下。
2009-07-07
詳解JS中如何終止foreach循環(huán)
forEach專(zhuān)門(mén)用來(lái)循環(huán)數(shù)組,可以直接取到元素,同時(shí)也可以取到index值,終止forEach存在局限性,不能continue跳過(guò)或者break終止循環(huán),所以本文給大家詳細(xì)介紹了在JS中如何終止foreach循環(huán),需要的朋友可以參考下
2024-01-01
使用JavaScript實(shí)現(xiàn)文本收起展開(kāi)(省略)功能
省略號(hào),作為一種常見(jiàn)的文本處理方式,在很多情況下都十分常見(jiàn),特別是當(dāng)我們需要在省略號(hào)后面添加額外文字時(shí),本文為大家介紹了使用JavaScript實(shí)現(xiàn)文本收起展開(kāi)功能的相關(guān)方法,希望對(duì)大家有所幫助
2024-04-04
二叉樹(shù)先序遍歷的非遞歸算法具體實(shí)現(xiàn)
這篇文章主要介紹了二叉樹(shù)先序遍歷的非遞歸算法，有需要的朋友可以參考一下
2014-01-01
webpack動(dòng)態(tài)加載與打包方式
webpack有兩種組織模塊依賴(lài)的方式，同步和異步，這篇文章主要介紹了webpack動(dòng)態(tài)加載與打包方式，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
淺談js繼承的實(shí)現(xiàn)及公有、私有、靜態(tài)方法的書(shū)寫(xiě)
下面小編就為大家?guī)?lái)一篇淺談js繼承的實(shí)現(xiàn)及公有、私有、靜態(tài)方法的書(shū)寫(xiě)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
多種方法實(shí)現(xiàn)JS動(dòng)態(tài)添加事件
JS動(dòng)態(tài)添加事件的方法有很多，我們可以使用setAttribute、attachEvent 和 addEventListener等等，感興趣的朋友可以參考下
2013-11-11
淺析我對(duì)JS延遲異步腳本的思考
這篇文章主要介紹了淺析我對(duì)JS延遲異步腳本的思考,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10