基于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 div{display: none;}
#content div.active{display: block;}
.show{background: red;}
</style>
</head>
<body>
<div id="box">
<ul id="ul1">
<li>首页</li>
<li>产品</li>
<li>新闻</li>
<li>联系</li>
<li>我的</li>
</ul>
<div id="content">
<div class="active">
<ul>
<li>new1</li>
<li>new2</li>
<li>new3</li>
</ul>
</div>
<div>
<ul>
<li>new4</li>
<li>new5</li>
<li>new6</li>
</ul>
</div>
<div>
<ul>
<li>new7</li>
<li>new8</li>
<li>new9</li>
</ul>
</div>
<div>
<ul>
<li>new10</li>
<li>new11</li>
<li>new12</li>
</ul>
</div>
<div>
<ul>
<li>new13</li>
<li>new14</li>
<li>new15</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var oli=document.getElementById("ul1").getElementsByTagName("li");
//alert(oli.length);
var odiv=document.getElementById("content").getElementsByTagName("div");
//alert(odiv.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='';
odiv[i].style.display='none';
}
this.className='show';
odiv[this._index].style.display='block';
}
}
}
</script>
</body>
</html>
首先我们在HTML部分定义网页选项卡中的内容。
<div id="box">
<ul id="ul1"><!--选项卡中的点击部分-->
<li>首页</li>
<li>产品</li>
<li>新闻</li>
<li>联系</li>
<li>我的</li>
</ul>
<div id="content">
<div class="active"><!--选项卡中要显示和被显示的部分-->
<ul>
<li>new1</li>
<li>new2</li>
<li>new3</li>
</ul>
</div>
<div>
<ul>
<li>new4</li>
<li>new5</li>
<li>new6</li>
</ul>
</div>
<div>
<ul>
<li>new7</li>
<li>new8</li>
<li>new9</li>
</ul>
</div>
<div>
<ul>
<li>new10</li>
<li>new11</li>
<li>new12</li>
</ul>
</div>
<div>
<ul>
<li>new13</li>
<li>new14</li>
<li>new15</li>
</ul>
</div>
</div>
</div>
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 div{display: none;}
#content div.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 odiv=document.getElementById("content").getElementsByTagName("div");//提取HTML中的元素
//alert(odiv.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='';
odiv[i].style.display='none';
}
this.className='show';
odiv[this._index].style.display='block';
}
}
}
</script>
JS语句中的第一个for循环是为了取得所有的选项卡中的点击部分；因为I这个变量在下面的事件函数中无法访问到，所以每次点击时，i变量循环到oli.length值。因此将i的值交给一个我们自定义的元素属性上来保存循环中i的值，供下面使用。即：oli[i]._index=i;
添加点击函数后，第二个for循环是为了把所有的oli的className改为“空”和所有的odiv的style为display='none'；循环结束后，在给当前点击的这个oli添加className和下面相应的odiv的style为display='block';
以下是运行的结果：
在编写程序时一定要注意，选项卡中的点击部分即：li的数量（JS里oli.length）要和下面ID为content的div里包含的div数量（JS里odiv.length）相同，我在编写程序时就因为oli.length与odiv.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 oDiv = document.getElementById(id);
var oBtn = oDiv.getElementsByTagName("li");
var oBox = oDiv.getElementsByTagName("div");
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 div.active {
display: block;
padding: 10px;
line-height: 20px;
width: 278px;
border: solid 1px #eee;
}
</style>
</head>
<body>
<div id="tabMain" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tabSide active">内容1</div>
<div class="tabSide">内容2</div>
<div class="tabSide">内容3</div>
</div>
<div id="tabMain1" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tabSide active">内容1</div>
<div class="tabSide">内容2</div>
<div class="tabSide">内容3</div>
</div>
<div id="tabMain2" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tabSide active">内容1</div>
<div class="tabSide">内容2</div>
<div class="tabSide">内容3</div>
</div>
<div id="tabMain4" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tabSide active">内容1</div>
<div class="tabSide">内容2</div>
<div class="tabSide">内容3</div>
</div>
</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 oDiv = document.getElementById(id);
var oBtn = oDiv.getElementsByTagName("li");
var oBox = oDiv.getElementsByTagName("div");
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>
通过添加事件和自运行函数完成多个选项卡。
-
本文向大家介绍js选项卡的实现方法，包括了js选项卡的实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js选项卡的实现方法。分享给大家供大家参考。具体分析如下： 一、思路 1. 获取元素； 2. for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件； 3. 点击当前按钮时会以高亮状态显示，通过for循环历遍把所有的按钮样式设置为空在把所有div的d
-
本文向大家介绍浅析js实现网页截图的两种方式，包括了浅析js实现网页截图的两种方式的使用技巧和注意事项，需要的朋友参考一下 Web端的截图(生成图片)并不算是个高频的需求，资料自然也不算多，查来查去，也不过Canvas 和 SVG两种实现方案，原理大概相似，都非真正义上的截图而是把DOM转为图片，然而实现方式却截然不同。 Canvas 实现 如何将dom转换成canvas图片？自然是要一点点画到c
-
本文向大家介绍Android基于ViewPager Fragment实现选项卡，包括了Android基于ViewPager Fragment实现选项卡的使用技巧和注意事项，需要的朋友参考一下 先给大家展示效果图： 1.新建TestFragmen继承Fragment 2.MyFragmentPagerAdapter继承FragmentPagerAdapter 3.MainActivity 要继承Fr
-
本文向大家介绍JS实现完全语义化的网页选项卡效果代码，包括了JS实现完全语义化的网页选项卡效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现完全语义化的网页选项卡效果代码。分享给大家供大家参考。具体如下： 这是一款完全语义化的JS网页选项卡，包括了两种用法，一种是点击式，另一种是滑动门式，具体用哪一种要根据你自己的需要了，滑动门是在鼠标经过时触发，选项卡则是需要鼠标点击的。
-
本文向大家介绍js实现抽奖的两种方法，包括了js实现抽奖的两种方法的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现抽奖的具体代码，供大家参考，具体内容如下 抽奖活动的原理还是很简单的，通过代码一目了然，如果看不懂就私聊我，可以私下交流！ 方法一：使用table写一个随机抽奖 这是html+js代码 方法二：使用span标签写 html+js代码如下 两个页面的css代码 以上
-
本文向大家介绍js简单实现竖向tab选项卡的方法，包括了js简单实现竖向tab选项卡的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js简单实现竖向tab选项卡的方法。分享给大家供大家参考。具体如下： 选项卡占据左边，而内容放在右边，一个适合新手的竖向的tab选项卡特效例子 希望本文所述对大家的javascript程序设计有所帮助。