html js css如何关联_html+css +js 选项卡

最新推荐文章于 2023-06-14 14:25:53 发布

weixin_39962285

最新推荐文章于 2023-06-14 14:25:53 发布

阅读量207

点赞数

文章标签： html js css如何关联 html+css tab页 html选项卡 js list遍历 js设置style js遍历list

先放效果图吧

第一种 html+css +jquery 记得引入juqery文件我偏向于第一种，eq是遍历

jQuery ±éÀú - eq() ·½·¨www.w3school.com.cn

这是他的官方解释，点击链接即可

上图是部分代码图样式自己设置即可

完整demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.title {
width: 200px;
display: flex;
}
.title div {
height: 30px;
font-size: 16px;
flex: 1;
border: 1px solid;
text-align: center;
line-height: 30px;
}
.active {
color: red;
}
.content {
width: 200px;
border: 1px solid;
}
.content div {
width: 100%;
height: 200px;
font-size: 18px;
display: none;
}
.content div:nth-child(1) {
background-color: green;
display: block;
}
.content div:nth-child(2) {
background-color: yellow;
}
.content div:nth-child(3) {
background-color: goldenrod;
}
</style>
</head>
<body>
<div class="title">
<div class="active">语文</div>
<div>数学</div>
<div>英语</div>
</div>
<div class="content">
<div>语文</div>
<div>数学</div>
<div>英语</div>
</div>
</body>
<script src='./js/jquery.js'></script>
<script>
$(function() {
$(".title div").click(function() {
$('.title div').removeClass('active')
$(this).addClass('active')
$('.content div').hide()
$('.content div').eq($('.title div').index(this)).show()
})
})
</script>
</html>

//02 html+css+javascript效果图和juqery一样我直接贴代码图吧

样式可以写哦，

下面我放一下完整demo 用的是循环遍历的写法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
list-style: none;
}
.title {
width: 200px;
display: flex;
}
.title li {
height: 30px;
font-size: 16px;
flex: 1;
border: 1px solid;
text-align: center;
line-height: 30px;
}
.act {
color: red;
}
.content {
width: 200px;
border: 1px solid;
}
.content div {
width: 100%;
height: 200px;
font-size: 18px;
display: none;
}
.content div:nth-child(1) {
background-color: green;
display: block;
}
.content div:nth-child(2) {
background-color: yellow;
}
.content div:nth-child(3) {
background-color: goldenrod;
}
</style>
</head>
<body>
<nav class="title">
<li class="act">语文</li>
<li>数学</li>
<li>英语</li>
</nav>
<div class="content">
<div class="tab">语文</div>
<div class="tab">数学</div>
<div class="tab">英语</div>
</div>
</body>
<script>
window.onload = function() {
var title = document.getElementsByTagName('li')
var cont = document.getElementsByClassName('tab')
for (var i = 0; i < title.length; i++) {
title[i].index = i;
title[i].onclick = function() {
for (var i = 0; i < title.length; i++) {
title[i].className = '';
cont[i].style.display = 'none'
}
this.className = 'act';
cont[this.index].style.display = 'block'
}
for (var m = 1; m < title.length; m++) {
title[m].className = '';
cont[m].style.display = 'none'
}
}
}
</script>
</html>

weixin_39962285

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html js css如何关联_html+css +js 选项卡

先放效果图吧第一种 html+css +jquery 记得引入juqery文件我偏向于第一种，eq是遍历jQuery ±éÀú - eq() ·½·¨www.w3school.com.cn 这是他的官方解释，点击链接即可上图是部分代码图样式自己设置即可完整demo<!DOCTYPE html><html lang="en"><head> <meta ...
复制链接

扫一扫