| 主题 : 里面有TAB页功能么 |
级别: 白丁
 |
1# 发表于:2011-09-07 14:41:24 IP:222.119.*.*
|
||||
|---|---|---|---|---|---|
级别: 白丁
|
3# 发表于:2011-09-08 09:16:04 IP:222.119.*.*
|
||
|---|---|---|---|
级别: 秀才
 |
5# 发表于:2014-04-10 13:57:04 IP:59.157.*.*
请问有相关的代码吗？
|
||
|---|---|---|---|
级别: 秀才
|
7# 发表于:2014-04-10 15:20:42 IP:59.157.*.*
实现Tab标签效果的代码
|
||
|---|---|---|---|
级别: 秀才
|
9# 发表于:2014-04-10 15:28:48 IP:59.157.*.*
我本地们有效果，类似于3楼的效果就可以
|
||
|---|---|---|---|
级别: 状元
 |
10# 发表于:2014-04-10 15:33:21 IP:59.245.*.*
完整代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>常用tab切换-柯乐义</title> <style type="text/css"> #box{width:500px;font-size:12px} #box ul{margin:0;padding:0;list-style:none} #box #tab{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE} #box #tab li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer} #box #tab li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px} #box #tab_con{border:1px solid #AACBEE;border-top:none;padding:20px} #box #tab_con li{display:none} #box #tab_con #tab_con_1{display:block;} </style> </head> <body> /*********1**********/ <div id="box"> <ul id="tab"> <li class="on" id="tab_1" onclick="switchTab(1)">新闻</li> <li id="tab_2" onclick="switchTab(2)">财经</li> <li id="tab_3" onclick="switchTab(3)">娱乐</li> <li id="tab_4" onclick="switchTab(4)">娱乐</li> </ul> <ul id="tab_con"> <li id="tab_con_1">新闻内容</li> <li id="tab_con_2">财经内容</li> <li id="tab_con_3">娱乐内容</li> <li id="tab_con_4">娱乐内容3</li> </ul> </div> <script type="text/javascript"> function switchTab(n){ for(var i = 1; i <= 4; i++){ document.getElementById("tab_" + i).className = ""; document.getElementById("tab_con_" + i).style.display = "none"; } document.getElementById("tab_" + n).className = "on"; document.getElementById("tab_con_" + n).style.display = "block"; } </script> </body> </html> 本文转载自柯乐义http://keleyi.com/a/bjac/h834ndao.htm |
||
|---|---|---|---|