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

更新时间：2020-09-01 18:00:02 作者：startmvc

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

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


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

运行结果：