UL LI 布局 TAB 切换条
2024-08-25 00:11:29
web页面实现tab的功能有几种实现方式，下面是使用UL LI DIV方式实现的tab。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab</title>
<style type="text/css">
.tab { height:23px;}
.tab ul { list-style:none; }
.tab li { border:1px solid #ccc; background:#eee; cursor:pointer; display:block; float:left; text-align:center; text-decoration:none; width:68px; font-size:12px; height:21px; line-height:21px; margin:0 2px; position:relative; top:1px; z-index:9; }
.tab li:hover { text-decoration:underline; }
.tab li.curr { background:#fff; border-bottom-color:#fff; cursor:default; font-weight:bold; }
.cc { border:1px solid #ccc; padding:10px; width:300px;}
</style>
<script type="text/javascript">
// tab
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"curr":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
</head>
<body>
<div class="tab">
<ul>
<li id="a1" onclick="setTab('a',1,3)" class="curr">tab_01</li>
<li id="a2" onclick="setTab('a',2,3)">tab_02</li>
<li id="a3" onclick="setTab('a',3,3)">tab_03</li>
</ul>
</div>
<div id="con_a_1" class="cc">11<br />111<br />111<br />111</div>
<div id="con_a_2" class="cc" style="display:none;">22<br />222<br />222<br />222</div>
<div id="con_a_3" class="cc" style="display:none;">33<br />333<br />333<br />333</div>
<br />
<br /> <div class="tab">
<ul>
<li id="b1" onmousemove="setTab('b',1,3)" class="curr">tab_01</li>
<li id="b2" onmousemove="setTab('b',2,3)">tab_02</li>
<li id="b3" onmousemove="setTab('b',3,3)">tab_03</li>
</ul>
</div>
<div id="con_b_1" class="cc">111<br />111<br />111<br />11</div>
<div id="con_b_2" class="cc" style="display:none;">22<br />222<br />222<br />222</div>
<div id="con_b_3" class="cc" style="display:none;">33<br />333<br />333<br />333</div>
</body>
</html>
最新文章
- IOS开发之—— 在AFN基础上进行的网络请求的封装
- Windows下PowerShell监控Keepalived
- openx中如何使用site-variable（参数）限制（关键词）广告显示
- fillStyle线性渐变
- Spring 通过maven pom文件配置初始化
- app推送方案
- null 和 undefined 的区别
- oracle 11g 一直提示 严重: 监听程序未启动或数据库服务未注册到该监听程序
- Web Service（一） 基础学习
- sqlserver2008安装教程
- nagios监控远程主机服务可能出现的问题
- OpenJudge 2766 最大子矩阵
- T-SQL语言基础
- hdu 5642 King's Order（数位dp）
- led.c驱动框架
- 【转】GPS定位原理
- mongodb进阶
- 如何用java发送Http的post请求，并传递参数
- urllib爬虫（流程+案例）
- 转://批量更新sequence的存储