练习了一个选项卡样式
- 框选选项卡的大边框 给其加css样式
2.排列内部内容，分为两个部分，标题和内容，先弄标题+css样式
3.圈定内容部分 +css样式
4.js样式，主要是获取标签，循环，改标签名称
用到的主要样式
css中
height width
border-bottom---- 加边框下划线
text-align 文本居中
line-height文本高度
display：none隐藏内容
display：block 显示内容
position 定位 相对relative 绝对absolute
js中
let tts=document.getElementsByClassName("tt")获取文本
for循环
tts[i].classList="tt"所有标题标签class都变为tt
如图效果
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡效果</title>
<link rel="stylesheet" href="./选项卡.css">
</head>
<body>
<div class="tab">
<div class="tab-title">
<div class="tt active">1</div>
<div class="tt">2</div>
<div class="tt">3</div>
</div>
<div class="tab-content">
<div class="tab-content">
<div class="tc active">1</div>
<div class="tc">2</div>
<div class="tc">3</div>
</div>
</div>
</div>
<script>
// js效果
// 步骤一:在tts变量中保存了三个标题标签
let tts = document.getElementsByClassName("tt")
// console.log(tts)
// 步骤二：给需要的每个标题标签添加鼠标进入事件
for (let i = 0; i < tts.length; i++) {
// console.log(tts[i])
tts[i].onmouseenter = function () {
// console.log("鼠标进入标题为",i ,"的标签")
//步骤三: 鼠标进入标题后，让选中标题高亮，不管之前是谁高亮，只要选中的高亮
// 去掉css中的active样式名称
for (let j = 0; j < tts.length; j++) {
// 操作class属性，可以使用固定语法classList
// 让所有标题的class变为tt不用active
tts[j].classList = "tt"
}
// 高亮选中的标题
tts[i].classList = "tt active"
// 循环内容
let tcs = document.getElementsByClassName("tc")
for (let x = 0; x < tcs.length; x++) {
tcs[x].classList = "tc"
}
tcs[i].classList = "tc active"
}
}
</script>
</body>
</html>
css样式
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 浏览器显示高度，宽度100% */
html,
body {
height: 100%;
width: 100%;
}
/* 所有字体10px大小 */
html {
font-size: 10px;
}
.tab {
/* 一个rem=10个px /
width: 40rem;
height: 30rem;
/ 加边框，实线，一个像素，黑色 */
border: solid 1px #000;
}
.tab-title {
width: 100%;
height: 5rem;
/* 弹性样式 /
display: flex;
/ 两边对齐排列 /
justify-content: space-between;
/ 文本居中 /
text-align: center;
/ 文本高度 /
/ 给边框增加下划线 /
border-bottom: solid 2px rgb(231, 150, 28);
/ background-color: paleturquoise; */
}
.tt {
height: 5rem;
/* 均匀分配宽度 /
flex: 1;
/ background-color: #fafafa; /
font-size: 1.8rem;
text-align: center;
/ 文本高度，边框高度=文本高度时，表示居中 */
line-height: 5rem;
}
/* ..tt.active中间不加空格，表示这两个名称出现在同一个标签中*/
.tt.active,
.tt:hover {
background-color: rgb(231, 150, 28);
color: white;
}
.tab-content {
height: 250px;
width: 100%;
background-color: burlywood;
position: relative;
}
.tc {
height: 100%;
width: 100%;
font-size: 1.8rem;
text-align: center;
position: absolute;
display: none;
}
/* .tc子标签的第一个 */
.tc.active{
display: block;
}
.tc:nth-of-type(1){
background-color: lightblue;
}
.tc:nth-of-type(2){
background-color: olive;
}
.tc:nth-of-type(3){
background-color: peachpuff;
}
