js实现tab选项卡函数代码

更新时间：2010年04月22日 20:57:47 作者：

js实现tab选项卡函数代码，需要的朋友可以参考下，这样的代码也是比较常用的，相当原理也比较简单。

<html> <head> <style type="text/css"> * { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-bottom: #000 1px solid; border-left: #000 1px solid; border-top: #000 1px solid; border-right: #000 1px solid; } .tab UL { zoom: 1; clear: both; } .tab UL:after { display: block; height: 0px; visibility: hidden; clear: both; content: ""; } .tab UL LI { text-align: center; line-height: 26px; width: 60px; display: inline; background: #000; float: left; height: 26px; color: #fff; } .tab UL LI.on { background: #fff; color: #000; } .tabList { border-bottom: #000 1px solid; border-left: #000 1px solid; height: 150px; border-top: #000 1px; border-right: #000 1px solid; } .tabList .one { padding-bottom: 10px; padding-left: 10px; padding-right: 10px; display: none; color: #ff0000; padding-top: 10px; } .tabList .block { display: block; } </style> <script type="text/javascript"> function setTab(name,m,n){ for( var i=1;i<=n;i++){ var menu = document.getElementById(name+i); var showDiv = document.getElementById("cont_"+name+"_"+i); menu.className = i==m ?"on":""; showDiv.style.display = i==m?"block":"none"; } } </script> <meta name="GENERATOR" content="MSHTML 8.00.7600.16535"> </head> <body> <div class="wid240"> <div class="tab"> <ul> <li id="one1" class="on" onmouseover='setTab("one",1,4)'>one1 </li> <li id="one2" onmouseover='setTab("one",2,4)'>one2 </li> <li id="one3" onmouseover='setTab("one",3,4)'>one3 </li> <li id="one4" onmouseover='setTab("one",4,4)'>one4 </li> </ul> </div> <div class="tabList"> <div id="cont_one_1" class="one block"> cont_one_1</div> <div id="cont_one_2" class="one"> cont_one_2</div> <div id="cont_one_3" class="one"> cont_one_3</div> <div id="cont_one_4" class="one"> cont_one_4</div> </div> </div> <div class="wid180"> <div class="tab"> <ul> <li id="tow1" class="on" onclick='setTab("tow",1,3)'>tow1 </li> <li id="tow2" onclick='setTab("tow",2,3)'>tow2 </li> <li id="tow3" onclick='setTab("tow",3,3)'>tow3 </li> </ul> </div> <div class="tabList"> <div id="cont_tow_1" class="one block"> cont_tow_1</div> <div id="cont_tow_2" class="one"> cont_tow_2</div> <div id="cont_tow_3" class="one"> cont_tow_3</div> </div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

一个极为简单的requirejs实现方法
下面小编就为大家带来一篇一个极为简单的requirejs实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
小程序实现轮播每次显示三条数据
这篇文章主要为大家详细介绍了小程序实现轮播每次显示三条数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
JavaScript中常见加密解密方法总结
这篇文章主要为大家详细介绍了JavaScript中常见加密解密方法的实现，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下
2023-03-03
利用JS实现点击按钮后图片自动切换的简单方法
下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
js+css实现计算器功能
这篇文章主要为大家详细介绍了js+css实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
iframe与主框架跨域相互访问实现方法
今天正好需要用到iframe 与主框架相互访问的实现方法，正好看到了这篇文章，确实不错，特分享一下,需要的朋友可以参考下
2017-09-09
TypeScript Typeof运算符的5个实用技巧详解
这篇文章主要为大家介绍了TypeScript Typeof运算符的5个实用技巧详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
JS中用三种方式实现导航菜单中的二级下拉菜单
我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单，比如下面这张图片。那么如何实现导航菜单栏中的二级下拉菜单呢？下面小编给大家分享JS中用三种方式实现导航菜单中的二级下拉菜单，感兴趣的朋友一起看看吧
2016-10-10
Highcharts 非常实用的Javascript统计图demo示例
官网实例中给出了各式各样的demo，可以参照document修改自己需要的即可，本文实现的是一个学生成绩走势demo，有需求的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
浅析JavaScript中回调地狱与asyn函数和await函数原理
这篇文章主要介绍了JavaScript中回调地狱与asyn函数和await函数原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-01-01