ホームページ > 記事 > ウェブフロントエンド > シンプルなタブ切り替えを実装する 4 つの JavaScript メソッド_JavaScript スキル
シンプルなタブ切り替えを実装する 4 つの JavaScript メソッド_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:21:431387ブラウズ
この記事では、JavaScript を使用した簡単なタブ切り替えの 4 つの方法を説明し、具体的な内容は次のとおりです。
レンダリング:
方法 1: for ループ + if で、現在のクリックがカスタム配列と一致するかどうかを判断します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style type="text/css">
button {
width:120px;
height: 32px;
line-height: 32px;
background-color: #ccc;
font-size: 24px;
}
div {
display: none;
width:200px;
height: 200px;
font-size: 72px;
color:#ddd;
background-color: green;
border:1px solid black;
}
</style>
</head>
<body>
<button style="background-color: yellow;">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<div style="display:block;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
//定义数组并获取数组内各个的节点
var buttonArr = document.getElementsByTagName("button");
var divArr = document.getElementsByTagName("div");
for(var i = 0; i < buttonArr.length;i++) {
buttonArr[i].onclick = function() {
//this
// alert(this.innerHTML)
//for循环遍历button数组长度
for(var j = 0; j < buttonArr.length; j++) {
//重置所有的button样式
buttonArr[j].style.backgroundColor = "#ccc";
//给当前的(点击的那个)那个button添加样式
this.style.backgroundColor = "yellow";
//隐藏所有的div
divArr[j].style.display = "none";
//判断当前点击是按钮数组中的哪一个？
if(this == buttonArr[j]) {
// alert(j);
//显示点击按钮对应的div
divArr[j].style.display = "block";
}
}
}
}
</script>
</body>
</html>
方法 2: 現在のクリックへのインデックスをカスタマイズします
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style type="text/css">
button {
width:120px;
height: 32px;
line-height: 32px;
background-color: #ccc;
font-size: 24px;
}
div {
display: none;
width:200px;
height: 200px;
font-size: 72px;
color:#ddd;
background-color: green;
border:1px solid black;
}
</style>
</head>
<body>
<button style="background-color: yellow;">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<div style="display:block;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
var buttonArr = document.getElementsByTagName("button");
var divArr = document.getElementsByTagName("div");
for(var i = 0; i < buttonArr.length;i++) {
buttonArr[i].index = i;
// buttonArr[i].setAttribute("index",i);
buttonArr[i].onclick = function() {
for(var j = 0; j < buttonArr.length; j++) {
buttonArr[j].style.backgroundColor = "#ccc";
buttonArr[this.index].style.backgroundColor = "yellow";
divArr[j].style.display = "none";
divArr[this.index].style.display = "block";
}
}
}
</script>
</body>
</html>
メソッド 3: className
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style type="text/css">
* {padding:0; margin:0;}
button {
background-color: #ccc;
width:80px;
height: 30px;
}
.btn-active {
background-color: yellow;
font-weight:bold;
font-size: 14px;
}
div{
width:200px;
height: 200px;
font-size: 64px;
background-color: #0c0;
display: none;
color:#fff;
}
.div-active {
display: block;
}
</style>
</head>
<body>
<button class="btn-active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<div class="div-active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
//1.先获取元素
var buttonList = document.getElementsByTagName("button");
var divList = document.getElementsByTagName("div");
//2.添加事件
for(var i = 0; i < buttonList.length; i++) {
buttonList[i].index = i;
buttonList[i].onclick = function() {
for(var j = 0; j < buttonList.length;j++) {
buttonList[j].className = "";
divList[j].className = "";
}
this.className = "btn-active";
divList[this.index].className = "div-active";
}
}
</script>
</body>
</html>
方法 4: className+匿名関数の自己実行
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style type="text/css">
* {padding:0; margin:0;}
button {
background-color: #ccc;
width:80px;
height: 30px;
}
.btn-active {
background-color: yellow;
font-weight:bold;
font-size: 14px;
}
div{
width:200px;
height: 200px;
font-size: 64px;
background-color: #0c0;
display: none;
color:#fff;
}
.div-active {
display: block;
}
</style>
</head>
<body>
<button class="btn-active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<div class="div-active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
//1.先获取元素
var buttonList = document.getElementsByTagName("button");
var divList = document.getElementsByTagName("div");
//2.添加事件
for(var i = 0; i < buttonList.length; i++) {
(function(i){ //匿名函数自执行
buttonList[i].onclick = function() {
for(var j = 0; j < buttonList.length;j++) {
buttonList[j].className = "";
divList[j].className = "";
}
this.className = "btn-active";
divList[i].className = "div-active";
}
})(i)
}
</script>
</body>
</html>
この記事が JavaScript プログラミングを学習するすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。