选项卡的简单原理实现

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了选项卡的简单原理实现相关的知识,希望对你有一定的参考价值。

      大家好,我是绅士扮演者,我喜欢将平时练的小案例拿出来与大家分享,也欢迎各位高人评论我的代码,提升技术,留下您宝贵的意见。有些地方可能没有注释,如果感觉有问题可以评论或私聊我都行。

      平时小案例之--选项卡:

      大家平常写选项卡应该都是通过设置class属性来通过动态添加或设置类名来实现内容的切换吧,我感觉那样的话要设置两套属性,不如直接动态设置css样式来控制内容的切换。下面是简单样式的源码(如有不好的地方,欢迎大家指正):

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
        <style type="text/css">
         *{padding:0;margin: 0;}
         ul>li{list-style: none;}
         div{width: 400px;height: 300px;margin: 50px auto;border: 1px solid black;overflow: hidden;}
         .sm{float: left;width: 100px;height: 20px;border-bottom: 1px solid black;}
         .lg{width: 400px;height: 280px;background: green;margin-top: 20px;}
        </style>
 </head>
 <body>
  <div>
   <ul id="ul1">
    <li class="sm" >1</li>
    <li class="sm" >2</li>
    <li class="sm" >3</li>
    <li class="sm" >4</li>
   </ul>
   
   <ul id="ul2">
    <li class="lg" >111111</li>
    <li class="lg" style="display: none;">22222</li>
    <li class="lg" style="display: none;">333333333</li>
    <li class="lg" style="display: none;">444444444</li>
   </ul>
  </div>
 </body>
</html>
<script type="text/javascript">
 var sm=document.getElementsByClassName("sm"),
     lg=document.getElementsByClassName("lg");
     for(var i=0;i<sm.length;i++){
      sm[i].index=i;
      sm[i].onmouseover=function(){
       for(var j=0;j<lg.length;j++){
       lg[j].style.display="none"; 
       }
//       console.log(this.index);
       this.style.backgroundColor="indianred";
       lg[this.index].style.display="block";
      }
      sm[i].onmouseout=function(){
       this.style.backgroundColor="white";
//          lg[i].style.display="none";
      }
     }
</script>

当然,大体思想还是排他思想。

 

    

以上是关于选项卡的简单原理实现的主要内容,如果未能解决你的问题,请参考以下文章

JS实战——选项卡的简单实现

js实现简单的滑动门和tab选项卡

JQuery Tabs - 在输入条目上更改选项卡的背景颜色

jquery实现的选项卡的嵌套代码实例

javascript如何实现浏览器选项卡的切换?

JS实现div选项卡切换