JavaScript——Tab选项卡

最新推荐文章于 2023-04-11 23:23:07 发布

JenniferSara

最新推荐文章于 2023-04-11 23:23:07 发布

阅读量448

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Chenbaby_/article/details/53385805

版权

JavaScript 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

<!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].οnclick=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>