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选项卡效果详解属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容