原生js实现tab栏目的切换

最新推荐文章于 2024-07-22 09:52:49 发布

qq_28862951

最新推荐文章于 2024-07-22 09:52:49 发布

阅读量181

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_28862951/article/details/125018193

版权

图片记得更换

<!DOCTYPE html>
<html>

<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}

.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}

.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}

.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}

.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}

.products .main {
float: left;
display: none;
}

.products .main.active {
display: block;
}

.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>

// 2. 底部显示隐藏模块一定要写到点击事件的里面
document.querySelector('.products .active').classList.remove('active')

// div对应序号的那个加上active
divs[i].classList.add('active')
})
}

</script>

</body>

</html>

qq_28862951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫