js实现选项卡效果
2012-02-24 15:35
549 查看
<!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>无标题文档</title>
<style>
ul{
list-style-type:none;
margin-left:-40px;
position:relative;
}
ul li{
padding:5px;
float:left;
width:80px;
position:relative;
display:block;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style:none;
margin:0px 2px 0px 0px;;
z-index:2;
}
#L1{
background-color:#9CC;
border-top-color: #F6C;
border-right-color: #F6C;
border-left-color: #F6C;
}
#L2{
background-color:#CC9;
border-color:#309;
margin-left:1px;
}
#L3{
background-color:#FF3;
border-color:#360;
}
#L4{
background-color:#690;
border-color:#360;
}
div{
width:400px;
height:220px;
position:absolute;
margin-top:28px;
z-index:1;
}
#d1{
background-color:#9CC;
border:1px solid #C39;
}
#d2{
background-color:#CC9;
border:1px solid #309;
display:none;
}
#d3{
background-color:#FF3;
border:1px solid #360;
display:none;
}
#d4{
background-color:#690;
border:1px solid #360;
display:none;
}
</style>
<script language="javascript">
//选项卡的个数
var num=4;
function getTab(now){
for(var i=1;i<=num;i++){
if(i==now){
document.getElementById("d"+i).style.display="block";
}else{
document.getElementById("d"+i).style.display="none";
}
}
}
</script>
</head>
<body style="margin:0px;">
<ul>
<li id="L1" onclick="getTab(1)">手机数码</li>
<li id="L2" onclick="getTab(2)">手机数码</li>
<li id="L3" onclick="getTab(3)">手机数码</li>
<li id="L4" onclick="getTab(4)">手机数码</li>
</ul>
<div id="d1">这里是手机数码</div>
<div id="d2">这里是家用电器</div>
<div id="d3">这里是品牌服饰</div>
<div id="d4">这里是品牌服饰</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul{
list-style-type:none;
margin-left:-40px;
position:relative;
}
ul li{
padding:5px;
float:left;
width:80px;
position:relative;
display:block;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style:none;
margin:0px 2px 0px 0px;;
z-index:2;
}
#L1{
background-color:#9CC;
border-top-color: #F6C;
border-right-color: #F6C;
border-left-color: #F6C;
}
#L2{
background-color:#CC9;
border-color:#309;
margin-left:1px;
}
#L3{
background-color:#FF3;
border-color:#360;
}
#L4{
background-color:#690;
border-color:#360;
}
div{
width:400px;
height:220px;
position:absolute;
margin-top:28px;
z-index:1;
}
#d1{
background-color:#9CC;
border:1px solid #C39;
}
#d2{
background-color:#CC9;
border:1px solid #309;
display:none;
}
#d3{
background-color:#FF3;
border:1px solid #360;
display:none;
}
#d4{
background-color:#690;
border:1px solid #360;
display:none;
}
</style>
<script language="javascript">
//选项卡的个数
var num=4;
function getTab(now){
for(var i=1;i<=num;i++){
if(i==now){
document.getElementById("d"+i).style.display="block";
}else{
document.getElementById("d"+i).style.display="none";
}
}
}
</script>
</head>
<body style="margin:0px;">
<ul>
<li id="L1" onclick="getTab(1)">手机数码</li>
<li id="L2" onclick="getTab(2)">手机数码</li>
<li id="L3" onclick="getTab(3)">手机数码</li>
<li id="L4" onclick="getTab(4)">手机数码</li>
</ul>
<div id="d1">这里是手机数码</div>
<div id="d2">这里是家用电器</div>
<div id="d3">这里是品牌服饰</div>
<div id="d4">这里是品牌服饰</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js实现简洁的滑动门菜单(选项卡)效果代码
- js实现简洁的滑动门菜单(选项卡)效果代码
- 【js基础】Tab选项卡切换效果实现
- js实现京东购物放大镜和选项卡效果
- JS+CSS实现的蓝色table选项卡效果
- js实现类似菜单风格的TAB选项卡效果代码
- JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
- js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
- JS实现的tab切换选项卡效果示例
- js实现选项卡内容切换以及折叠和展开效果【推荐】
- JS基于myFocus库实现各种功能的tab选项卡切换效果
- 选项卡js 改变图片的路径来实现点击和未点击的不同效果
- JS实现简单的tab切换选项卡效果
- JS+CSS实现的日本门户网站经典选项卡导航效果
- jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
- css+js实现的网页常见选项卡效果
- javascript实现tabs选项卡切换效果(自写原生js)
- js实现仿Windows风格选项卡和按钮效果实例
- JS基于面向对象实现的选项卡效果示例
- js实现选项卡切换效果