<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab選項卡</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
height: 50px;
width: 50px;
border: 1px solid #cccccc;
text-align: center;
line-height: 50px;
border-bottom-color: orangered;
}
.select {
border-color: orangered;
}
div {
width: 206px;
height: 100px;
clear: both;
border: 1px solid orangered;
border-top: none;
display: none;
}
</style>
</head>
<body>
<ul id="ul"></ul>
<div>內容1</div>
<div>內容2</div>
<div>內容3</div>
<div>內容4</div>
<script>
var ul=document.getElementById("ul");
var arr=["充話費","遊戲","旅行","車險"];
var str="";
for(var n=0;n<arr.length;n++){
str=str+"<li>"+arr[n]+"</li>"
}
ul.innerHTML=str;
var li=document.getElementsByTagName("li");
li[0].className="select";
li[0].style.borderBottom="none";
var div=document.getElementsByTagName("div")
div[0].style.display="block"
for(var n=0;n<li.length;n++){
li[n].value=n;
li[n].onclick=function(){
// alert(this.value)
for(var n=0;n<li.length;n++){
li[n].className="";
li[n].style.borderBottom="1px solid orangered"
}
li[this.value].className="select";
li[this.value].style.borderBottom="none"
for(var n=0;n<div.length;n++){
div[n].style.display="none"
}
div[this.value].style.display="block"
}
}
</script>
</body>
</html>
