代码改变世界

JavaScript Tag标签切换实现的几种方法 原生js + jquery

2012-03-28 11:51  VVG  阅读(9057)  评论(0)  编辑  收藏  举报

   Tab标签切换

   效果图：

HTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>resize</title>
<style type="text/css">
*{margin:0;padding:0;}
 .wrap{width:500px; margin:10px auto; }
 #tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; }
 #tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;}
 #tag .current{ color:#000; background:#ccc; }
 #tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }
</style>
</head>
<body>
<div class="wrap">
    <ul id="tag">
      <li class="current" >标签一</li>
      <li>标签二</li>
      <li>标签三</li>
      <li>标签4</li>
   </ul>
   <div id="tagContent">
      <div> 内容一<br>内容一 </div>
      <div> 内容二<br>内容二 </div>
      <div> 内容三<br>内容三 </div>
      <div> 内容4<br>内容4 </div>
   </div>
</div>
</body>
</html>

Js方法一（此处应用了两个FOR循环，代码量比方法二稍多）

(function(){
    var tag = document.getElementById("tag"),
        tagLi = tag.getElementsByTagName("li"),
        tagContent = document.getElementById("tagContent"),
        tagContentDiv = tagContent.getElementsByTagName("div"),
        len = tagLi.length;
        tagContentDiv[0].style.display = "block";
        for(var i=0;i<len;i++){            
            tagLi[i].onmouseover = function(t){
                        return function(){
                            this.className = "current";
                            tagContentDiv[t].style.display = "block";
                            for(var j=0;j<len;j++){
                                if(j!=t){
                                    //alert(i);
                                    tagLi[j].className = "";
                                    tagContentDiv[j].style.display = "none";
                                }
                            }
                        }
                }(i);
        }
})()

方法二

var tag=document.getElementById("tag").children; //获取Tag下的li，即Tag标签 
  var content=document.getElementById("tagContent").children; //获取Tag标签对应的内容 
  content[0].style.display = "block"; //默认显示第一个标签的内容 
  var len= tag.length; 
  for(var i=0; i<len; i++) 
  { 
    tag[i].index=i; //设置对象的INDEX属性，方便下面调用 
    tag[i].onclick = function() { 
    for(var n=0; n<len; n++) {
        tag[n].className="";
        content[n].style.display="none"; 
    }
    tag[this.index].className = "current"; 
    content[this.index].style.display = "block"; 
  } 
}

方法三使用JQuery如下：

$(function(){
    $("#tagContent div").eq(0).show();
    $("#tag li").mouseover(
        function(){
            $(this).addClass("current").siblings().removeClass("current");
            index = $("#tag li").index(this);
            $("#tagContent div").eq(index).show().siblings().hide();
        } 
    )
})


按对象封装方式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>resize</title>
<style type="text/css">
*{margin:0;padding:0;}
 #wrap{width:500px; margin:10px auto; }
 #tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; }
 #tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;}
 #tag .current{ color:#000; background:#ccc; }
 #tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }
</style>
</head>
<body>
<div id="warp">
    <ul id="tag">
      <li>标签一</li>
      <li>标签二</li>
      <li>标签三</li>
      <li>标签4</li>
      <li>标签5</li>
   </ul>
   <div id="tagContent">
      <div class="J_tabClass"> 内容一<br>内容一 </div>
      <div class="J_tabClass"> 内容二<br>内容二 </div>
      <div class="J_tabClass"> 内容三<br>内容三 </div>
      <div class="J_tabClass"> 内容4<br>内容4 </div>
      <div class="J_tabClass"> 内容4<br>内容5555555555555555 </div>
   </div>
</div>
<script type="text/javascript">
//nameSpace
var VVG = {};
VVG.DOM = {};
//创建getElementsByClassName方法
VVG.DOM.getElementsByClassName = function(str,parent,tag){
   //父节点存在
if(parent){
   // 当父节点为string类型时，查找DOM节点，否则直接引用parent
      parent = typeof parent == "string" ? document.getElementById(parent):parent;
      // parent为空时提示错误信息
if(!parent) alert("找不到标签，请检查参数是否正确");
   }else{
      // 未传值时，父节点为body
      parent = document.body;
   }
   // tagContent为节点类型，未传值时为all节点
   tag = tag || "*";
   // 在父节点查找子节点，建立空数组arr
var els = parent.getElementsByTagName(tag),arr=[];
   for(var i=0,n=els.length;i<n;i++){
      // 查找每个节点下的classname，以空格分离为一个k数组
for(var j=0,k=els[i].className.split(" "),l=k.length;j<1;j++){
         // 当K数组中有一个值与str值相等时，记住这个标签并推入arr数组
if(k[j]==str){
            arr.push(els[i]);
            break;
         }
      }
   }
   // 返回数组
return arr;
}
//创建TabManager对象
VVG.TabManager = function(oo){
         this.root = oo.root || "warp"; 
         this.tabUlId = oo.tabUlId||"tabUlId";
         this.tabConId = oo.tabConId||"tabConId";
         this.tabConClass = oo.tabConClass||"J_tabClass";
         this.trggle = oo.trggle || "click";
         this.currentCss = oo.currentCss || "current";
      }
VVG.TabManager.prototype = {
      tabChange:function(){
         // 获取UL的id
var ulid = document.getElementById(this.tabUlId);
         // 获取UL下的LI元素
var ulli = ulid.getElementsByTagName("li");
         // 获取内容盒子DIV元素
var tabConId = document.getElementById(this.tabConId);
         // 获取root下的div的class为特定值的对象数组
var tabConClasses = VVG.DOM.getElementsByClassName(this.tabConClass,this.root,"div");
         // 初始化
         ulli[0].className = this.currentCss;
         tabConClasses[0].style.display = 'block';
         for (var i = ulli.length - 1; i >= 0; i--) {
            // 赋值this 与 that,避免this混乱
var that = this;
            // 设置对象index属性
            ulli[i].index = i;
            // 设置对象的事件
            ulli[i]["on" + this.trggle] = function(){
               for(var j = tabConClasses.length - 1; j >= 0; j--){
                  tabConClasses[j].style.display = "none";
                  ulli[j].className = "";
               }
               tabConClasses[this.index].style.display = "block";
               this.className = that.currentCss;
            }
         }
      }
   }
// 新建对象实例
var TabManager1 = new VVG.TabManager(
   {
   root:"warp",//包裹tab对象的div层的ID名称，必填
   tabUlId:"tag",//TAB标签LI元素的父亲UL元素的ID名称，必填
   tabConId:"tagContent",//内容元素的包裹盒子的ID名称，必填   
   trggle:"mouseover",//切换方式，默认为click，可选
   currentCss:"current",//TAB标签liy元素的当前CSS名称，默认为current
   tabConClass:"J_tabClass",//内容元素的CLASS名称，默认为J_tabClass
   }
);
// 调用对象方法
TabManager1.tabChange();

</script>
</body>
</html>