使用js制作一个选项卡功能

最新推荐文章于 2024-05-14 23:03:23 发布

CQXXTXX

最新推荐文章于 2024-05-14 23:03:23 发布

阅读量415

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/CQXXTXX/article/details/127836960

版权

在学习js时写的一个选项卡小案例，选项卡功能也是一个非常实用且有趣的小功能，刚开始觉得挺难的，但是写出来以后就懂了是怎么回事，其实很简单

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.nav{
width: 100%;
height: 50px;
display: flex;
justify-content: center;
background-color: #000000;
}
.nav div{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
}

.list{
width: 50%;
margin-left: 25%;
}
.list div{
width: 100%;
height: 300px;
}
.active{
background-color: aqua;
color: #FFFFFF;
}
</style>
</head>
<body>

<div class="nav">
<div class="active">按钮一</div>
<div class="">按钮二</div>
<div class="">按钮三</div>
<div class="">按钮四</div>
</div>
<div class="list">
<div style="background-color: #0000FF;">1</div>
<div style="background-color: #00FFFF;">2</div>
<div style="background-color: #FF0000;">3</div>
<div style="background-color: #ffff00;">4</div>
</div>

<script type="text/javascript">

let nav = document.getElementsByClassName('nav')[0];
let but = nav.getElementsByTagName('div');

let list = document.getElementsByClassName('list')[0];
let item = list.getElementsByTagName('div');

// 隐藏多余选项列表
for(let i = 1; i < item.length; i++){
item[i].style.display = "none";
}

// 循环按钮绑定事件
for(let k = 0; k < but.length; k++){
but[k].onclick = function(){

for(let j = 0; j < but.length; j++){
but[j].className = "";
item[j].style.display = "none";
}
but[k].className = "active";
item[k].style.display = "block";
}
}
console.log(item)
</script>
</body>
</html>

21. 使用js制作一个整蛊小功能
这是在学习js时从一位大佬哪里学到的，非常有趣，拿来整蛊朋友是个很不错的选择，也非常简单
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="isOpen()"></button>
<button onclick="isMove()"></button>
<script type="text/javascript">
for( let i = 1;  ; i += 1){
let myweb = window.open('','','width=200,heigth=200')
myweb.moveTo(i,i);
}
</script>
</body>
</html>