javascript实现tab切换的四种方法
这篇文章主要介绍了javascript实现tab切换的四种方法，并且对每个方法进行了评价，感兴趣的小伙伴们可以参考一下
tab切换在网页中很常见，故最近总结了4种实现方法。
首先，写出tab的框架，加上最简单的样式，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
float:left;
}
#tabCon{
clear: both;
}
</style>
</head>
<body>
<p id="tanContainer">
<p id="tab">
<ul>
<li>标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
</p>
<p id="tabCon">
<p>内容一</p>
<p>内容二</p>
<p>内容三</p>
<p>内容四</p>
</p>
</p>
</body>
</html>现在的显示效果如下图：
四个tab标题和四个内容区都显示在了页面中，现在要实现tab切换效果，即点击标题一，内容一显示出来，其他内容不显示；点击标题二，内容二显示出来，其他内容不显示……
那么，整体思路很简单，给四个标题绑定事件，触发的时候对应的内容显示，其他的内容隐藏。
方法一：点击标题对应的内容显示，非点击标题对应的内容隐藏。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
</style>
<script>
function tab(pid){
var tabs=["tab1","tab2","tab3","tab4"];
for(var i=0;i<4;i++){
if(tabs[i]==pid){
document.getElementById(tabs[i]).style.display="block";
}else{
document.getElementById(tabs[i]).style.display="none";
}
}
}
</script>
</head>
<body>
<p id="tanContainer">
<p id="tabNav">
<ul>
<li onclick="tab('tab1')">标题一</li>
<li onclick="tab('tab2')">标题二</li>
<li onclick="tab('tab3')">标题三</li>
<li onclick="tab('tab4')">标题四</li>
</ul>
</p>
<p id="tab">
<p id="tab1">内容一</p>
<p id="tab2">内容二</p>
<p id="tab3">内容三</p>
<p id="tab4">内容四</p>
</p>
</p>
</body>
</html>方法二：先设置所有内容隐藏，然后点击标题对用的内容显示。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
float:left;
}
#tabCon{
clear: both;
}
#tabCon_1{
display: none;
}
#tabCon_2{
display: none;
}
#tabCon_3{
display: none;
}
</style>
<script>
function changeTab(tabCon_num){
for(i=0;i<=3;i++) {
document.getElementById("tabCon_"+i).style.display="none"; //将所有的层都隐藏
}
document.getElementById("tabCon_"+tabCon_num).style.display="block";//显示当前层
}
</script>
</head>
<body>
<p id="tanContainer">
<p id="tab">
<ul>
<li onclick="changeTab('0')">标题一</li>
<li onclick="changeTab('1')">标题二</li>
<li onclick="changeTab('2')">标题三</li>
<li onclick="changeTab('3')">标题四</li>
</ul>
</p>
<p id="tabCon">
<p id="tabCon_0">内容一</p>
<p id="tabCon_1">内容二</p>
<p id="tabCon_2">内容三</p>
<p id="tabCon_3">内容四</p>
</p>
</p>
</body>
</html>方法三：显示和隐藏通过是有拥有class控制，先把所有的内容隐藏dispaly设为none，而该class的display设置为block，遍历所有标题节点和内容节点，点击标题后，该标题节点和对用的内容节点拥有class，其他的没有。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
float:left;
}
#tabCon {
clear: both;
}
#tabCon p {
display:none;
}
#tabCon p.fp {
display:block;
}
</style>
</head>
<body>
<p id="tanContainer">
<p id="tab">
<ul>
<li class="fli">标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
</p>
<p id="tabCon">
<p class="fp">内容一</p>
<p>内容二</p>
<p>内容三</p>
<p>内容四</p>
</p>
</p>
</body>
<script>
var tabs=document.getElementById("tab").getElementsByTagName("li");
var ps=document.getElementById("tabCon").getElementsByTagName("p");
for(var i=0;i<tabs.length;i++){
tabs[i].onclick=function(){change(this);}
}
function change(obj){
for(var i=0;i<tabs.length;i++){
if(tabs[i]==obj){
tabs[i].className="fli";
ps[i].className="fp";
}else{
tabs[i].className="";
ps[i].className="";
}
}
}
</script>
</html>该方法的缺点是，内容块的p下面不能再有p标签了。
方法四：不用js，用“input:checked”来做tab切换，先把所有的内容隐藏，被选中的内容显示。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input:checked实现tab切换</title>
<style>
input{
opacity: 0;/*隐藏input的选择框*/
}
label{
cursor: pointer;/*鼠标移上去变成手状*/
float: left;
}
label:hover{
background: #eee;
}
input:checked+label{
color: red;
}
/*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/
.tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1),
.tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){
opacity: 1;
}
.panel{
opacity: 0;
position: absolute;/*使内容区域位置一样*/
}
</style>
</head>
<body>
<p class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">标题一</label>
<input id="two" name="tabs" type="radio">
<label for="two">标题二</label>
<p class="panels">
<p class="panel">
<p>内容一</p>
</p>
<p class="panel">
<p>内容二</p>
</p>
</p>
</p>
</body>
</html>该方法的缺点是，不同区域切换只能通过点击。
以上就是为大家总结的tab切换实现方法，希望对大家的学习有所帮助，顺着这个思路动手制作自己tab切换特效。
更多javascript实现tab切换的四种方法相关文章请关注PHP中文网！
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?
Mar 18, 2025 pm 03:14 PM
Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?
Mar 18, 2025 pm 03:16 PM
Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.
Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified?
Mar 18, 2025 pm 03:17 PM
Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.
Bagaimana saya menggunakan kerangka koleksi Java dengan berkesan?
Mar 13, 2025 pm 12:28 PM
Artikel ini meneroka penggunaan rangka koleksi Java yang berkesan. Ia menekankan memilih koleksi yang sesuai (senarai, set, peta, giliran) berdasarkan struktur data, keperluan prestasi, dan keselamatan benang. Mengoptimumkan penggunaan pengumpulan melalui cekap
TypeScript untuk pemula, Bahagian 2: Jenis Data Asas
Mar 19, 2025 am 09:10 AM
Sebaik sahaja anda telah menguasai tutorial TypeScript peringkat kemasukan, anda harus dapat menulis kod anda sendiri dalam IDE yang menyokong TypeScript dan menyusunnya ke dalam JavaScript. Tutorial ini akan menyelam ke dalam pelbagai jenis data dalam TypeScript. JavaScript mempunyai tujuh jenis data: null, undefined, boolean, nombor, rentetan, simbol (diperkenalkan oleh ES6) dan objek. Typescript mentakrifkan lebih banyak jenis atas dasar ini, dan tutorial ini akan meliputi semuanya secara terperinci. Jenis data null Seperti JavaScript, Null dalam TypeScript
Bermula dengan Chart.js: Pie, Donut, dan Carta Bubble
Mar 15, 2025 am 09:19 AM
Tutorial ini akan menerangkan cara membuat carta pai, cincin, dan gelembung menggunakan carta.js. Sebelum ini, kami telah mempelajari empat jenis carta carta.js: carta baris dan carta bar (tutorial 2), serta carta radar dan carta rantau polar (Tutorial 3). Buat carta pai dan cincin Carta pai dan carta cincin sangat sesuai untuk menunjukkan perkadaran keseluruhan yang dibahagikan kepada bahagian yang berlainan. Sebagai contoh, carta pai boleh digunakan untuk menunjukkan peratusan singa lelaki, singa wanita dan singa muda dalam safari, atau peratusan undi yang diterima oleh calon yang berbeza dalam pilihan raya. Carta pai hanya sesuai untuk membandingkan parameter tunggal atau dataset. Harus diingat bahawa carta pai tidak dapat menarik entiti dengan nilai sifar kerana sudut kipas dalam carta pai bergantung pada saiz berangka titik data. Ini bermaksud mana -mana entiti dengan perkadaran sifar
