JS实现的简单tab切换功能完整示例

2024-05-06 16:52:29

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现的简单tab切换功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.vevb.com 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>

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：javascript获取select值的方法完整实例

下一篇：javascript实现5秒倒计时并跳转功能