js實現選項卡效果 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="https://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;
  } 
  
 p{
 
  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>
<p id="d1">這裡是手機數碼</p>
<p id="d2">這裡是傢用電器</p>
<p id="d3">這裡是品牌服飾</p>
<p id="d4">這裡是品牌服飾</p>
</body>
</html>

摘自 youngerhao的專欄

發佈留言