Rumah >hujung hadapan web >tutorial js >javascript实现网页中的选项卡（两种方法）
javascript实现网页中的选项卡（两种方法）
- 陈政宽～asal
- 2017-06-28 11:59:211743semak imbas
这篇文章主要介绍了用js语句实现网页中的选项卡（两种方法），非常不错，具有参考借鉴价值,需要的朋友可以参考下
网页中经常会用到选项卡这种东东，说白了就是点击一个选项，下面会弹出这个选项里的内容。
方法一：
方法一利用简单的代码即可实现，以下是全部的代码；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 600px;background: #ccc;margin: 0 auto;}
li{list-style: none;}
#ul1{display: block; width: 100%;overflow: hidden;}
#ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
#content{width: 100%;margin-top: 20px;}
#content p{display: none;}
#content p.active{display: block;}
.show{background: red;}
</style>
</head>
<body>
<p id="box">
<ul id="ul1">
<li>首页</li>
<li>产品</li>
<li>新闻</li>
<li>联系</li>
<li>我的</li>
</ul>
<p id="content">
<p class="active">
<ul>
<li>new1</li>
<li>new2</li>
<li>new3</li>
</ul>
</p>
<p>
<ul>
<li>new4</li>
<li>new5</li>
<li>new6</li>
</ul>
</p>
<p>
<ul>
<li>new7</li>
<li>new8</li>
<li>new9</li>
</ul>
</p>
<p>
<ul>
<li>new10</li>
<li>new11</li>
<li>new12</li>
</ul>
</p>
<p>
<ul>
<li>new13</li>
<li>new14</li>
<li>new15</li>
</ul>
</p>
</p>
</p>
<script type="text/javascript">
window.onload=function(){
var oli=document.getElementById("ul1").getElementsByTagName("li");
//alert(oli.length);
var op=document.getElementById("content").getElementsByTagName("p");
//alert(op.length)
for(var i=0;i<oli.length;i++){
oli[i]._index=i;
oli[i].onclick=function(){
//alert(i);
for(i=0;i<oli.length;i++){
oli[i].className='';
op[i].style.display='none';
}
this.className='show';
op[this._index].style.display='block';
}
}
}
</script>
</body>
</html>首先我们在HTML部分定义网页选项卡中的内容。
<p id="box">
<ul id="ul1"><!--选项卡中的点击部分-->
<li>首页</li>
<li>产品</li>
<li>新闻</li>
<li>联系</li>
<li>我的</li>
</ul>
<p id="content">
<p class="active"><!--选项卡中要显示和被显示的部分-->
<ul>
<li>new1</li>
<li>new2</li>
<li>new3</li>
</ul>
</p>
<p>
<ul>
<li>new4</li>
<li>new5</li>
<li>new6</li>
</ul>
</p>
<p>
<ul>
<li>new7</li>
<li>new8</li>
<li>new9</li>
</ul>
</p>
<p>
<ul>
<li>new10</li>
<li>new11</li>
<li>new12</li>
</ul>
</p>
<p>
<ul>
<li>new13</li>
<li>new14</li>
<li>new15</li>
</ul>
</p>
</p>
</p>CSS部分对HTML中的内容进行修饰：
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 600px;background: #ccc;margin: 0 auto;}
li{list-style: none;}
#ul1{display: block; width: 100%;overflow: hidden;}
#ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
#content{width: 100%;margin-top: 20px;}
#content p{display: none;}
#content p.active{display: block;}
.show{background: red;}
</style>最后是最重要的js部分：
<script type="text/javascript">
window.onload=function(){
var oli=document.getElementById("ul1").getElementsByTagName("li");
//alert(oli.length);
var op=document.getElementById("content").getElementsByTagName("p");//提取HTML中的元素
//alert(op.length)
for(var i=0;i<oli.length;i++){
oli[i]._index=i;
oli[i].onclick=function(){
//alert(i);
for(i=0;i<oli.length;i++){
oli[i].className='';
op[i].style.display='none';
}
this.className='show';
op[this._index].style.display='block';
}
}
}
</script>JS语句中的第一个for循环是为了取得所有的选项卡中的点击部分；因为I这个变量在下面的事件函数中无法访问到，所以每次点击时，i变量循环到oli.length值。因此将i的值交给一个我们自定义的元素属性上来保存循环中i的值，供下面使用。即：oli[i]._index=i;
添加点击函数后，第二个for循环是为了把所有的oli的className改为“空”和所有的op的style为display='none'；循环结束后，在给当前点击的这个oli添加className和下面相应的op的style为display='block';
以下是运行的结果：
在编写程序时一定要注意，选项卡中的点击部分即：li的数量（JS里oli.length）要和下面ID为content的p里包含的p数量（JS里op.length）相同，我在编写程序时就因为oli.length与op.length不相等，导致程序报错，但是好长时间都找不到错误；总而言之还是要多多细心。
方法二：
方法一适用于选项卡比较少的情况，但如果选项卡内容较多时我们要用到这种方法，第二种方法运用到了这周我们老师讲的一个在JS种比较重要的知识点：自运行函数
(function a(){
//函数里的内容
})(参数);定义函数a();给整个函数带上括号，后面的括号为输入参数；
以下为方法二自运行函数的程序：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多个tab选项卡</title>
<script>
window.onload = function() {
tab("tabMain", "click");
tab("tabMain1", "click");
tab("tabMain2", "click");
tab("tabMain4", "click");
function tab(id, event) {
var op = document.getElementById(id);
var oBtn = op.getElementsByTagName("li");
var oBox = op.getElementsByTagName("p");
for(var i = 0; i < oBtn.length; i++) {
//console.log(i)
(function(index) {//自执行函数
oBtn[index].addEventListener(event, function() {
for(var i = 0; i < oBtn.length; i++) {
oBtn[i].className = '';
oBox[i].className = 'tabSide';
}
this.className = 'active';
oBox[index].className = 'active';
});//添加事件监听
})(i)
}
}
}
</script>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.tabMenu {
width: 300px;
margin: 50px auto 0 auto;
}
.tabMenu ul {
display: block;
overflow: hidden;
width: 300px;
height: 40px;
background: #eee;
}
.tabMenu ul li {
cursor: pointer;
display: block;
float: left;
width: 100px;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 16px;
}
.tabMenu ul li.active {
background: #f00;
color: #fff;
}
.tabMenu .tabSide {
display: none;
padding: 10px;
line-height: 20px;
width: 278px;
border: solid 1px #eee;
}
.tabMenu p.active {
display: block;
padding: 10px;
line-height: 20px;
width: 278px;
border: solid 1px #eee;
}
</style>
</head>
<body>
<p id="tabMain" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p class="tabSide active">内容1</p>
<p class="tabSide">内容2</p>
<p class="tabSide">内容3</p>
</p>
<p id="tabMain1" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p class="tabSide active">内容1</p>
<p class="tabSide">内容2</p>
<p class="tabSide">内容3</p>
</p>
<p id="tabMain2" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p class="tabSide active">内容1</p>
<p class="tabSide">内容2</p>
<p class="tabSide">内容3</p>
</p>
<p id="tabMain4" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p class="tabSide active">内容1</p>
<p class="tabSide">内容2</p>
<p class="tabSide">内容3</p>
</p>
</body>
</html>和方法一相似先写HTML里的内容，CSS部分对HTML进行修饰，我们直接来看JS部分；
<script>
window.onload = function() {
tab("tabMain", "click");
tab("tabMain1", "click");
tab("tabMain2", "click");
tab("tabMain4", "click");
function tab(id, event) {
var op = document.getElementById(id);
var oBtn = op.getElementsByTagName("li");
var oBox = op.getElementsByTagName("p");
for(var i = 0; i < oBtn.length; i++) {
//alert(i)；
(function(index) {//自执行函数
oBtn[index].addEventListener(event, function() {
for(var i = 0; i < oBtn.length; i++) {
oBtn[i].className = '';
oBox[i].className = 'tabSide';
}
this.className = 'active';
oBox[index].className = 'active';
});//添加事件监听
})(i)
}
}
}
</script>通过添加事件和自运行函数完成多个选项卡。
Atas ialah kandungan terperinci javascript实现网页中的选项卡（两种方法）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：javascript基于正则来实现数字千分位用逗号分隔的方法Artikel seterusnya：javascript 设置cookie 有效期 检测cookie
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional