Tab选项卡 javascript 原生实现

Tab选项卡用的还是挺多的,现在我们使用javascript 实现:

效果图:无附加和修饰,简单实现


全部代码:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Tab 选项卡</title>
  <style>
      *{margin:0; padding:0;}
      #abc{width:400px; height:400px; background-color:#eee; position:absolute;
      left:50%;top:50%; margin-left:-200px; margin-top:-200px;}
      #abc ul{width:400px; height:100px; background-color:#ccc; list-style-type:none;
      padding:0; margin:0;}
      #abc ul li{float:left; width:98px; height:100px; border:1px solid rgb(83, 43, 43);
      text-align:center; line-height:100px; cursor:pointer;}
      #abc .div_hide{width:400px; height:300px; display:none;}
      #abc .div_show{display:block;width:400px; height:300px;}
  </style>
 </head>
 <body>

    <div id="abc">
           <ul>
               <li>新闻</li>
               <li>视频</li>
               <li>音乐</li>
               <li>游戏</li>
           </ul>
           <div class="div_show">新闻的内容</div>
           <div class="div_hide">视频的内容</div>
           <div class="div_hide">音乐的内容</div>
           <div class="div_hide">游戏的内容</div>
    </div>
       <script>
             var abc=document.getElementById("abc"); 
             var obj_title=abc.getElementsByTagName("li");
             var obj_content=abc.getElementsByTagName("div");
             for(var i=0;i<obj_title.length;i++){
                 obj_title[i].value=i;
                 obj_title[i].οnclick=function(){
                     for(var j=0;j<obj_content.length;j++){ //置空所有 div  使之不显示 
                        obj_content[j].className="div_hide";
                     }
                    obj_content[this.value].className="div_show";
                 }
             }
       </script>
 </body>
</html>


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页