案例二、自定义选项卡

最新推荐文章于 2024-10-30 19:26:10 发布

原创最新推荐文章于 2024-10-30 19:26:10 发布 · 603 阅读

0 ·

CC 4.0 BY-SA版权

本文将详细解析如何在项目中实现自定义选项卡功能，从需求分析到代码实现，覆盖了UI设计、交互逻辑及常见问题解决方案，帮助开发者更好地理解和创建个性化的选项卡组件。

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>tab选项卡</title>

<style type="text/css">
*{
margin: 0;
padding: 0;
}
.content{
width: 400px;
height: 400px;
background-color: yellow;
margin: 0 auto;
overflow: hidden;
}
ul li{
list-style: none;
display: inline-block;
box-sizing:border-box;
width: 100px;
height: 40px;
background-color: red;
float: left;
text-align: center;
line-height: 40px;
border-right: 1px solid green;
}
.content1{
position: relative;
top:40px;
height: 360px;
display: none;
}
.content>.content1{
display: block;

background-color: purple;
}
.active{
background-color: pink;
}
</style>
</head>
<body>
<h1>tab choose card</h1>
<div class = "content">

<ul>
<li class = " active">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
<li>选项卡4</li>
</ul>
<div class = "content1">
11111
</div>
<div class = "content1">
2222
</div>
<div class = "content1">
3333
</div>
<div class = "content1">
4444
</div>

</div>

<script type="text/javascript">
var j = null;
var lis = document.getElementsByTagName('li');
var contents = document.getElementsByClassName('content1');
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;

lis[i].onclick = function(){
for(var k = 0 ; k < lis.length; k++){
lis[k].setAttribute("class","");
contents[k].style.display="none";
}
j = this.index;
lis[j].setAttribute("class","active");
contents[j].style.display="block";
}

};
</script>

</body>
</html>