<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 14px;
}
.main{
margin: 10px;
}
.main ul{
list-style-type: none;
height: 2em;
}
.main ul li{
float: left;
width: 5em;
height: 2em;
text-align: center;
line-height: 2em;
background: #00CCFF;
color: white;
margin-right: 10px;
cursor: pointer;
transition: all 0.3s;
}
.main .content{
width: 300px;
padding: 10px;
background: #CCFFFF;
}
.content div{
display: none;
}
.content #first{
display: block;
}
.main ul .change{
background: #CCFFFF;
color: black;
}
</style>
</head>
<body>
<div class="main" id="main">
<ul class="head" id="head">
<li>欄目一</li>
<li>欄目二</li>
<li>欄目三</li>
</ul>
<div class="content" id="content">
<div id="first">
欄目一的內容<br>
欄目一的內容<br>
欄目一的內容<br>
欄目一的內容<br>
</div>
<div >
欄目二的內容<br>
欄目二的內容<br>
欄目二的內容<br>
欄目二的內容<br>
</div>
<div >
欄目三的內容<br>
欄目三的內容<br>
欄目三的內容<br>
欄目三的內容<br>
</div>
</div>
</div>
<script type="text/javascript">
window.οnlοad=function(){
var b=document.getElementById("head");
var btn=b.getElementsByTagName('li');
var content=document.getElementById("content");
var word=content.getElementsByTagName("div");
for(var i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].οnmοuseοver=function(){
// 先清空三個按鈕的樣式,同時隱藏所有內容
for(var i=0;i<btn.length;i++){
btn[i].className=" ";
word[i].style.display="none";
}
// 使鼠標滑過的按鈕改變樣式,同時顯示相應版塊的內容
this.className="change";
// 這裏涉及到閉包的概念,不能採用word[i]的寫法,因爲這裏i的值始終爲3
word[this.index].style.display="block";
};
}
}
</script>
</body>
</html>javascript基礎練習-選項卡切換
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.