web前端全系列 教程
1839个小节阅读:2244.3k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
xxxxxxxxxx
<html>
<head>
<style>
.tab input {
background: #F1F1F1;
border: 1px solid #FF0000;
}
.tab .active {
background: #E9D4D4;
}
.tab div {
width:300px;
height:250px;
display:none;
padding: 10px;
background: #E9D4D4;
border: 1px solid #FF0000;
}
</style>
<meta charset="utf-8" />
<title>选项卡</title>
<script>
function Tab(id){
var tabBox = document.getElementById(id);
this.tabBtn = tabBox.getElementsByTagName('input');
this.tabDiv = tabBox.getElementsByTagName('div');
for(var i=0;i<this.tabBtn.length;i++){
this.tabBtn[i].index = i;
var _this = this;
this.tabBtn[i].onclick = function(){
_this.clickBtn(this);
};
}
};
Tab.prototype.clickBtn = function(btn){
for(var j=0;j<this.tabBtn.length;j++){
this.tabBtn[j].className='';
this.tabDiv[j].style.display='none';
}
btn.className='active';
this.tabDiv[btn.index].style.display='block';
};
</script>
<script>
window.onload = function(){
var tab1 = new Tab("tabBox1");
var tab2 = new Tab("tabBox2");
}
</script>
</head>
<body>
<div id="tabBox1" class="tab">
<input type="button" value="web" class="active" />
<input type="button" value="Java" />
<input type="button" value="Python" />
<div style="display:block;">React、Vue</div>
<div>SpringBoot、SpringMVC</div>
<div>Flask、Django</div>
</div>
<br />
<div class="tab" id="tabBox2">
<input type="button" value="技术" class="active" />
<input type="button" value="工具" />
<input type="button" value="网站" />
<div style="display:block;">Java、WEB</div>
<div>vsCode、WebStorm</div>
<div>百战程序员、尚学堂</div>
</div>
</body>
</html>