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

2019-11-19 11:18:22

字體：大中小

供稿：網(wǎng)友

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

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

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