今天使用JavaScript寫一個簡易的選項卡，性能不優化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Js簡易選項卡</title>
<style type = "text/css">
* {
margin: 0px;
padding: 0px;
}
div#wrap {
margin: 50px auto;
width:604px;
}
#item {
height: 40px;
border: 2px solid #000;
border-radius: 5px 5px 0 0;
background-color: black;
}
#item ul {
list-style:none;
}
#item ul li {
width: 120px;
height: 40px;
line-height: 40px;
float:left;
text-align:center;
color: #fff;
border-radius: 5px;
}
#item li:hover {
color: black;
background-color: #129884;
}
div#content {
width: 600px;
border: 2px solid #000;
border-radius:0 0 5px 5px;
border-top:0px;
box-shadow:5px 5px 8px #666;
}
div.wrapDiv {
display: none;
clear: both;
}
div#content ul {
list-style: disc;
margin-left: 40px;
}
</style>
<script>
function $(id) {
return document.getElementById(id);
}
function divOne() {
$("Div1").style.display = "block";
$("Div2").style.display = "none";
$("Div3").style.display = "none";
$("Div4").style.display = "none";
$("Div5").style.display = "none";
}
function divTwo() {
$("Div2").style.display = "block";
$("Div1").style.display = "none";
$("Div3").style.display = "none";
$("Div4").style.display = "none";
$("Div5").style.display = "none";
}
function divThree() {
$("Div3").style.display = "block";
$("Div1").style.display = "none";
$("Div2").style.display = "none";
$("Div4").style.display = "none";
$("Div5").style.display = "none";
}
function divFour() {
$("Div4").style.display = "block";
$("Div2").style.display = "none";
$("Div3").style.display = "none";
$("Div1").style.display = "none";
$("Div5").style.display = "none";
}
function divFive() {
$("Div5").style.display = "block";
$("Div2").style.display = "none";
$("Div3").style.display = "none";
$("Div4").style.display = "none";
$("Div1").style.display = "none";
}
</script>
</head>
<body>
<div id="wrap">
<div id="item">
<ul>
<li οnmοuseοver="divOne();">選項1</li>
<li οnmοuseοver="divTwo();">選項2</li>
<li οnmοuseοver="divThree();">選項3</li>
<li οnmοuseοver="divFour();">選項4</li>
<li οnmοuseοver="divFive();">選項5</li>
</ul>
</div>
<div id="content">
<div id="Div1" class="wrapDiv">
<ul>
<li>W3C標準</li>
<li>IE事件</li>
<li>DOM事件</li>
<li>CSS選擇器</li>
<li>HTML語義化</li>
</ul>
</div>
<div id="Div2" class="wrapDiv">
<ul>
<li>數據類型</li>
<li>對象</li>
<li>數組</li>
<li>函數</li>
<li>正則</li>
<li>模塊化</li>
</ul>
</div>
<div id="Div3" class="wrapDiv">
<ul>
<li>自動播放</li>
<li>自動輪播</li>
<li>漂浮效果</li>
<li>放大效果</li>
<li>縮小效果</li>
</ul>
</div>
<div id="Div4" class="wrapDiv">
<ul>
<li>改變背景顏色</li>
<li>改變字體大寫</li>
<li>改變邊框</li>
<li>改變背景透明度</li>
<li>改變顏色</li>
</ul>
</div>
<div id="Div5" class="wrapDiv">
<ul>
<li>自動播放</li>
<li>自動輪播</li>
<li>漂浮效果</li>
<li>放大效果</li>
<li>over~~</li>
<li>the end</li>
</ul>
</div>
</div>
</div>
</body>
</html>
