js 选项卡（事件委托）

 

先上完整实例

非常简单 不过由于使用了闭包 性能并不咋样 学习用

思路：根据切换栏的标题 点击产生event.target event.srcElement 获取到点击元素的内容  根据内容 获取到这个元素的索引值 然后对应内容块里的内容显示 不对应的内容隐藏

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style type="text/css">
    #content p{ display: none;}
    #content .current{ display: block;}

</style>
<ul id="tab">
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul>
<div id="content">
    <p class="current">第一个内容块</p>
    <p>第二个内容块</p>
    <p>第三个内容块</p>
    <p>第四个内容块</p>
    <p>第五个内容块</p>

</div>
<script type="text/javascript">
     function tab(parentID,paren_sonElement,contentID,content_sonElement){
       var d=document;
        d.getElementById(parentID).onclick=function(e){
            var e = e|| window.event,
                    target = e.target|| e.srcElement,// IE 下srcElement 谷歌等 e.target
                    index = getIndex(target);

                    hd(index,contentID,content_sonElement);


        };
         /*获取元素索引*/
         function getIndex(dd){
           var eles =  d.getElementById(parentID).getElementsByTagName(paren_sonElement);
           for(var i=0,ii=eles.length;i<ii;i++) {

               if(eles[i] == dd){

                   return i;
               }
           }

         };
         /*点击tab 显示对应的内容块*/
         function hd(index,contentID,content_sonElement){
            var eles = d.getElementById(contentID).getElementsByTagName(content_sonElement);
             for(var i=0,ii=eles.length;i<ii;i++) {

                 if(i == index){
                     eles[index].style.display='block';
                 }else{
                     eles[i].style.display='none';
                 }

             }



         };



    };

    tab('tab','li','content','p');


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

使用方法

暂时四个参数

第一个tab 是父级元素 你点击的部分的ID

第二个是在上面父级元素的下级子元素（就是你点击的元素标签li  a 之类）

第三个是内容块的ID

第四个是内容块ID下面的子元素 （也就是要显示的内容标签）　

这里的事件没有放到参数里比如上面的例子使用的是onclick 这个应该tab函数给个type事件类型的参数 不过总是没弄好  （我这技术好渣）

1.事件类型 没有参数在函数tab里 也就是应该有个JS事件绑定函数

2.函数tab使用了闭包 性能不好 使用原型会少占用内存　

 

posted @ 2015-07-06 23:01  星耀学园  阅读(799)  评论(0)    收藏  举报