选项卡开发

主要是实现网页中的选项卡效果，当鼠标在标题上移动时选项卡上对应的标题也随之变化

主要代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡页面</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
    height: 100%;
    width: 100%;
}

html {
    font-size: 10px;
}

.ll {
    width: 40rem;
    height: 30rem;
    border: solid 2px rgb(0, 0, 0);
    border-radius: 8px;
    overflow: hidden;
}

.qq {
    border-bottom: solid 1px rgb(0, 0, 0);
    height: 5rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    /*控制弹性容器中子元素在主轴方向上的对齐方式*/
}

.zz {
    border-right: solid 1px rgb(0, 0, 0);
    width: 33%;
    height: 5rem;
    text-align: center;
    line-height: 5rem;
    font-size: 1.8rem;
    cursor: pointer;
    /*当鼠标指针移动到应用了这个样式的元素上时，光标会变成一个“手形”图标*/
}

.qq .zz:last-child

/*控制指定子元素内容*/
    {
    border-right: none;
}

.zz:hover {
    background-color: rgb(0, 0, 0);
    color: white;
}

.gg {
    height: 100%;
    width: 100%;
    position: relative;
    /*相对定位，可用left，top，right来指导偏移量*/
    overflow: hidden;
    /*隐藏溢出内容*/
    background-color: rgb(168, 95, 95);
}

.gg .xx {
    width: 100%;
    height: 100%;
    color: rgb(0, 0, 0);
    font-size: 1.6rem;
    text-align: center;
    position: absolute;
    /*绝对定位，将元素精确的放在指定任何位置*/
    display: none;
}

.xx:nth-of-type(1)

/*控制指定子元素内容和格式效果*/
    {
    background-color: rgb(251, 0, 0);
    display: block;
}

.xx:nth-of-type(2) {
    background-color: rgb(251, 255, 0);
}

.xx:nth-of-type(3) {
    background-color: rgb(2, 28, 255);
}

</style>

<body>
<div class="ll">
<div class="qq">
<div class="zz">标题1</div>
<div class="zz">标题2</div>
<div class="zz">标题3</div>
</div>
<div class="gg">
<div class="xx">内容1</div>
<div class="xx">内容2</div>
<div class="xx">内容3</div>
</div>
</div>
<script>
let tts = document.getElementsByClassName("zz")/标题输入/
for (let i = 0; i < tts.length; i++)/大循环/ {
tts[i].onmouseenter = function () {
console.log("鼠标进入了第" + i + "个标题")
let tcs = document.getElementsByClassName("xx")
for (let j = 0; j < tcs.length; j++) {
tcs[j].style.display = "none"
}
tcs[i].style.display = "block"
for (let x = 0; x < tts.length; x++) {
tts[i].classList = "zz"
}
tts[i].classList = "zz active"
}
}
</script>
</body>

图片内容如下：

[图片上传失败...(image-e1b756-1743077781703)]

选项卡开发

推荐阅读更多精彩内容