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 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>
總結
以上是生活随笔為你收集整理的html js css如何关联_html+css +js 选项卡的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 无线路由器的dns一般怎样设置无线网dn
- 下一篇： 如何实现多台无线路由器信号自动切换两个路