javascript tab选项卡效果详解

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了简单的tab选项卡效果。

下面给出代码,并且详细介绍一下它的实现过程。

代码实例:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<title>犀牛前端部落</title> 
<style type="text/css">
body,div,ul,li{
padding:0;
margin:0;
text-align:center;
}
body{
font:12px "宋体";
text-align:center;
}
a:link,a:visited{
color:#00F;
text-decoration:none;
}
a:hover,a:active{
color:#c00;
text-decoration:underline;
}
ul{list-style:none;}
.box{margin:1em auto;}
br{clear:both;}
/*菜单class*/
.Menubox{
width:960px;
background:#eff8fe;
border-bottom:2px #9bcff7 solid;
height:36px;
line-height:36px; 
border-top: none;
}
.Menubox li{
float:left;
display:block;
cursor:pointer;
width:114px;
border-right:0px #cccccc solid;
text-align:center;
color:#0099cc;
font-weight:bold;
font-size:14px; 
border-top: 2px solid #98d0f7; 
border-right: 2px solid #98d0f7;
}
.Menubox li.hover{
background:#fff;
width:116px;
border:2px solid #98d0f7;
border-bottom:0px solid #fff;
color:#dc0004;
font-weight:bold;
height:36px;
line-height:36px;
font-size:14px; 
border-right: 2px solid #98d0f7; 
border-left: none;
}
.Menubox li.out{border-top:1px #cccccc solid;}
.Contentbox{
width:956px;
clear:both;
border:2px solid #98d0f7;
border-top:0;
height:150px;
line-height:150px;
text-align:center;
padding-top:8px;
}
.Contentbox span{color:#ccc;}
</style>
<script language="javascript" type="text/javascript">
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
window.onload=function(){
var Menubox=document.getElementById("Menubox");
var lis=Menubox.getElementsByTagName("li");
for(var index=1;index<lis.length;index++){
(function(index){
lis[index].onclick=function(){
setTab('two',index,4);
}
})(index)
}
}
</script>
</head>
<body>
<div class="box">
<div id="Menubox" class="Menubox">
<ul>
<li style="color:#000000; width:180px">犀牛前端部落</li>
<li id="two1" class="hover">连心卡</li>
<li id="two2">储蓄卡</li>
<li id="two3">信用卡</li>
<li id="two4">消费卡</li>
</ul>
</div>
<div class="Contentbox">
<p id="con_two_1" >标题列表1<span>(点击切换)</span></p>
<p id="con_two_2" style="display:none">标题列表2<span>(点击切换)</span></p>
<p id="con_two_3" style="display:none">标题列表3<span>(点击切换)</span></p>
<p id="con_two_4" style="display:none">标题列表4<span>(点击切换)</span></p>
</div>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).function setTab(name,cursel,n){},此方法实现了选项卡切换功能,第一个参数是一个字符串,其实是li元素id属性值得字符部分,第二个参数是一个数字,和li元素选项卡和p元素内容部分的索引对应,第三个参数是规定有几个选项卡。

(2).for(i=1;i<=n;i++){},一个for循环语句,用于进行比对,然后进行选项卡切换的相关设置,之所以从1开始是因为第一个li元素不是选项卡的一部分。

(3).var menu=document.getElementById(name+i),获取对应索引的li元素对象。

(4).var con=document.getElementById("con_"+name+"_"+i),获取对应索引的p元素对象。

(5).menu.className=i==cursel?"hover":"",如果当前i的值等于cursel,那么就添加class属性并设置属性值为hover。

(6).con.style.display=i==cursel?"block":"none",和上面同样的道理,如果相等,则显示,否则隐藏。

(7).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。

(8).var Menubox=document.getElementById("Menubox"),获取id属性值为Menubox的元素对象。

(9).var lis=Menubox.getElementsByTagName("li"),获取Menubox元素下的所有li元素集合。

(10).for(var index=1;index<lis.length;index++){},for循环语句,遍历每一个li元素。

(11).(function(index){

  lis[index].onclick=function(){

    setTab('two',index,4);

  }

})(index),采用闭包的方式为li元素注册click事件处理函数。

二.相关阅读:

(1).className可以参阅js className一章节。

(2).三元运算符可以参阅javascript 三元运算符一章节。

(3).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。

(4).闭包可以参阅闭包概念简单通俗介绍一章节。

javascript tab选项卡效果详解,这样的场景在实际项目中还是用的比较多的,关于javascript tab选项卡效果详解就介绍到这了。

javascript tab选项卡效果详解属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容