js实现tab选项卡函数代码
时间：2024-04-19 10:43:25
<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>
标签：js,tab,选项卡
0
投稿猜你喜欢
pytorch 如何使用amp进行混合精度训练
2023-12-25 13:35:02
丢失的数据忘记备份的处理方法[图文]第1/2页
2024-01-18 22:18:41
如何用Python来理一理红楼梦里的那些关系
2023-03-28 08:56:31
Java连接Mysql 8.0.18版本的方法详解
2024-01-24 10:08:29
在ASP.NET 2.0中操作数据之四十四：DataList和Repeater数据排序（三）
2023-07-02 04:45:57
python笔记（1） 关于我们应不应该继续学习python
2023-06-05 17:25:00
mysql中索引使用不当速度比没加索引还慢的测试
2024-01-13 13:17:44
使用vux实现上拉刷新功能遇到的坑
2024-04-28 09:25:18
PyCharm2021最新激活码+激活码补丁(亲测最新版PyCharm2021.3激活成功)
2022-09-18 05:22:03
一篇文章教会你PYcharm的用法
2023-06-30 14:18:56
python 二维数组90度旋转的方法
2021-05-18 20:16:19
浅析javascript操作 cookie对象
2024-04-18 10:49:23
CSS实现垂直居中的5种方法
2009-03-04 12:53:00
Git下载与环境变量配置方法
2022-10-19 19:53:13
5.PHP的其他功能
2023-11-14 16:45:42
MySQL数据库之union,limit和子查询详解
2024-01-16 08:15:29
nodejs读取并去重excel文件
2024-04-27 16:17:48
Python网络编程之TCP套接字简单用法示例
2023-03-10 05:42:10
使用Fabric自动化部署Django项目的实现
2022-09-05 22:00:33
Nuxt3+ElementPlus构建打包部署全过程
2023-07-02 16:28:51
