js和jquery实现简单的选项卡

 选项卡切换在做网页的时候经常会用到,以往都是用JQ来实现,代码简单易懂,今天用原生的js实现了一下,二者还是有很大不同的,可以对比一下代码来研究一下。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style>
     body{margin: 20px;padding: 0;}
     ul{list-style: none; margin: 0;padding: 0; height: auto; overflow: hidden;}
     li{float: left; border: 1px solid #333333; padding: 5px; margin-right: 5px; }
     .li_hover{background: #C87800;}
     .div_list{border: 1px solid #333; display: none; height: 300px; margin-top: 10px; background: #C87800; width: 300px;} 
    </style>
    <script>
   /*js方法*/ 
    window.onload=function(){
        var li=document.getElementsByTagName("li");//获取li的集合
        var divlist=document.getElementsByClassName("div_list");//获取div_list 集合 
        for(var i=0;i<li.length;i++){//循环 
            li[i].index=i;//给li添加索引值
            li[i].onclick=function(){//li点击事件
                 for(var j=0;j<li.length;j++){//第二层for循环  初始化li 和div的值
                     li[j].className=""; 
                     divlist[j].style.display="none";
                 }
                this.className="li_hover";//给点击的li添加背景色
                divlist[this.index].style.display="block";//通过this.index显示对应的div
            }
        }
    }
    /*JQ方法*/
    /*
         $(function(){
             $("ul li").click(function(){
                 var li_index=$(this).index();//获取点击的li的索引
                 $("ul li").removeClass("li_hover");//清空所有li的样式
                 $(this).addClass("li_hover");//给当前点击的li添加背景样式
                 $(".div_list").css("display","none");//隐藏所有的 div
                 $(".div_list").eq(li_index).css("display","block");//显示对应索引的div
             })
         })*/
         
    </script>
</head> 
<body>
<ul>
 <li class="li_hover">aaaa</li>
 <li>bbbb</li>
 <li>cccc</li>
</ul>
<div>
    <div class="div_list" style="display: block;">aaaaaaaaaaaaa</div>
    <div class="div_list">bbbbbbbbbbbbb</div>
    <div class="div_list">ccccccccccccc</div>
</div>
</body>
</html>

 

posted @ 2016-06-14 10:52  蓝眼睛~~  阅读(384)  评论(0编辑  收藏  举报