css+js實現選項卡
<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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章