CSS选项卡效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/php_897721669/article/details/7288654

<!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" οnclick="Tab(1)">手机数码</li>
<li id="L2" οnclick="Tab(2)">家电商城</li>
<li id="L3" οnclick="Tab(3)">电子购物</li>
</ul>
<div id="d1">这是手机数码</div>
<div id="d2" style="display:none">这是家电商城</div>
<div id="d3" style="display:none">这是电子购物</div>
</body>
</html>

css+js实现选项卡