您的位置：首页 > Web前端 > CSS

css+js实现选项卡

2012-02-23 21:09 253 查看

<!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>css-选项卡</title>

<style>

ul{

width:300px;

position:relative;

list-style-type:none;

margin-left:-40px;

z-index:2;

}

ul li{

border-left-width:1px;

border-top-width:1px;

border-right-width:1px;

border-bottom-width:0px;

border-style:solid;

padding-top:5px;

height:30px;

margin-top:-5px;

}

#L1 {

border-color:#F00;

background-color:#CC0;

float:left;

}

#L2 {

border-color:#00C;

background-color:#6F9;

float:left;

margin-left:5px;

margin-right:5px;

}

#L3 {

border-color:#F90;

background-color:#FF9;

float:left;

}

div{

border-left-width:1px;

border-top-width:1px;

border-right-width:1px;

border-bottom-width:1px;

border-style:solid;

margin-top:30px;

width:300px;

height:200px;

position:absolute;

z-index:1;

}

#d1{

border-color:#F00;

background-color:#CC0;

}

#d2{

border-color:#00C;

background-color:#6F9;

}

#d3{

border-color:#F90;

background-color:#FF9;

}

</style>

<script language="javascript" type="text/javascript">

function Tab(tab){

var num=3;

// alert("d"+tab);

for(var i=1;i<=num;i++){

if(i==tab){

document.getElementById("d"+i).style.display="block";

}else{

document.getElementById("d"+i).style.display="none";

}

}

}

</script>

</head>

<body>

<ul>

<li id="L1" onclick="Tab(1)">手机数码</li>

<li id="L2" onclick="Tab(2)">家电商城</li>

<li id="L3" onclick="Tab(3)">电子购物</li>

</ul>

<div id="d1">这是手机数码</div>

<div id="d2" style="display:none">这是家电商城</div>

<div id="d3" style="display:none">这是电子购物</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航