登陆 注册

javascript实现选项卡面板切换

守望者 2020-04-04 398人围观 ,发现3个评论 javascript

    用html+css做一个选项卡面板的时候,我们要实现点击选项卡实现面板切换的效果,这时候就需要引入javascript脚本加上事件监听。

由于本文的重点部分在javascript部分上,所以将本文放在了javascript分类,尽管如此,还是会牵涉到其他如html,css部分内容,所以本文

将突出讲解各部分核心关键内容。


         QQ截图20200404121030.jpg

html部分:


   首先做一个类名为tab_wrap包含框作为选项卡面板的主体包含框,


   其内部又包含两个div元素:

   1. tabs包含框主要放置选项卡部分(“选项一”,“选项二”,“选项三”,“选项四”)。

     

<div id="tabs">
            <ul>
               <li >选项一</li>  
               <li disable>选项二</li>  
               <li >选项三</li>  
               <li >选项四</li>  
            </ul>
          </div>


   2. contents包含框主要放置tabs中每个选项卡的对应包含框,即选项卡切换时将展现的内容包含框。

  <div id="contents">
               <div ></div>
               <div ></div>
               <div ></div>
               <div ></div>
          </div>


css部分:


tab_wrap包含框设置定高,同时消除内外边距:

div#tab_wrap{
            width:100%;
            height: 600px;
            margin: 0;
            padding: 0;
        }


tabs包含框也要设置定高,同时设置overflow:hidden属性,避免后面内部浮动布局出现的的bug:

 div#tabs{
             width:100%;
             height: 60px;
             overflow: hidden;
        }


消除ul元素默认样式(列表项左边的标记):

div#tabs ul{
            list-style: none;
        }


<li>标签就是代表这里的每个选项卡,设置向左浮动实现平铺:

 div#tabs li{
            height: 60px;
            line-height: 60px;
            float:left;
            padding:0 2em;
            vertical-align: middle;
            cursor: pointer;
            
        }


通过js设置<li>标签的class属性为 selected 和 unselected(后面js部分会讲到) 分别表示选项卡选中和未选中时的状态,分别定义两个状态的css样式:

 div#tabs li.selected{
            color:#1f3a87;
/*            background-color: #e6f2ff;*/
             background-color: orange;
            border: 1px solid #e6f2ff;
            font-weight: bold;
        }
        
         div#tabs li.unselected{
            color:#1f3a87;
             background-color: #e6f2ff;
/*              background-color: orange;*/
            border: 1px solid #e6f2ff;
           
            
        }

div#contents div即为即将切展示的选项面板(一共四个)

通过js设置这个面板的class属性为show和notshow(后面js部分会讲到)分别表示面板展示和未展示时的状态,分别定义两个状态的css样式和共有样式:

 div#contents div.show{
            display:block;
        }
        div#contents div.notshow{
            display:none;
        }
        
        div#contents div{
        
            width:500px;
            height: 500px;
        }


定义四个面板的背景色以示区分:

        div#contents div:nth-of-type(1){background-color: red;}
        div#contents div:nth-of-type(2){background-color: orange;}
        div#contents div:nth-of-type(3){background-color: yellow;}
        div#contents div:nth-of-type(4){background-color: green;}


javascript部分:


定义一个initTabPaneClassName()函数,用来初始化选项卡和展示面板的class属性,

获取所有选项卡lis 和展示面板divs:

 function initTabPaneClassName(tabid,contentid){
            var lis = document.getElementById(tabid).getElementsByTagName("li");
            var divs = document.getElementById(contentid).getElementsByTagName("div");
        。。。。。
        }


遍历两个节点数组,设置选项卡不可选中字体:

lis[j].onselectstart = function(){return false;}


设置第一个选项卡为“selected”状态,其余为“unselected”状态,

设置第一个面板为“show”状态,其余为“notshow”状态。

lis[j].onselectstart = function(){return false;}   
                     
                     if(j==0){
                         lis[j].className = "selected";
                         divs[j].className = "show";
                     }
                    else{
                         lis[j].className = "unselected";
                         divs[j].className = "notshow";
                    }


定义一个tab_click()函数,每次点击选项卡的时候将会调用该函数实现选项卡和面板的切换,

遍历lis数组,为每一个选项卡添加一个鼠标点击监听,

function tab_click(tabid,contentid){
           var lis = document.getElementById(tabid).getElementsByTagName("li");
           var divs = document.getElementById(contentid).getElementsByTagName("div");
           
           if(lis.length!=divs.length){alert("选项与内容框数量不一样!");return;}
          
           for(var i=0;i<lis.length;i++){
               
               lis[i].value = i;
               
               lis[i].addEventListener("click",function(e){。。。。}
               。。。。}


当每一个选项卡被点击时,遍历lis数组,将所有选项卡设为“unselected”状态,将所有面板设为“notshow”状态隐藏,

最后将被点击选项卡设为“selected”状态,将对应面板设为“show”状态展示出来:

 for(var j=0;j<lis.length;j++){
                     lis[j].className = "unselected";
                     divs[j].className = "notshow";

                   }
                       
                     lis[e.target.value].className = "selected";
                     divs[e.target.value].className = "show";


本文所有html,css,js部分代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

    <style>
    
        div#tab_wrap{
            width:100%;
            height: 600px;
            margin: 0;
            padding: 0;
        }
        
        div#tabs{
             width:100%;
             height: 60px;
             overflow: hidden;
        }
        
        div#tabs ul{
            list-style: none;
        }
        
        div#tabs li{
            height: 60px;
            line-height: 60px;
            float:left;
            padding:0 2em;
            vertical-align: middle;
            cursor: pointer;
            
        }
        
        div#tabs li.selected{
            color:#1f3a87;
/*            background-color: #e6f2ff;*/
             background-color: orange;
            border: 1px solid #e6f2ff;
            font-weight: bold;
        }
        
         div#tabs li.unselected{
            color:#1f3a87;
             background-color: #e6f2ff;
/*              background-color: orange;*/
            border: 1px solid #e6f2ff;
           
            
        }
        
        div#contents{margin-top: 10px;}
        div#contents div.show{
            display:block;
        }
        div#contents div.notshow{
            display:none;
        }
        
        div#contents div{
        
            width:500px;
            height: 500px;
        }
        div#contents div:nth-of-type(1){background-color: red;}
        div#contents div:nth-of-type(2){background-color: orange;}
        div#contents div:nth-of-type(3){background-color: yellow;}
        div#contents div:nth-of-type(4){background-color: green;}
        
    </style>
    
     
    <script>
   
       function initTabPaneClassName(tabid,contentid){
            var lis = document.getElementById(tabid).getElementsByTagName("li");
            var divs = document.getElementById(contentid).getElementsByTagName("div");
           
           for(var j=0;j<lis.length;j++){
               
                     lis[j].onselectstart = function(){return false;}   
                     
                     if(j==0){
                         lis[j].className = "selected";
                         divs[j].className = "show";
                     }
                    else{
                         lis[j].className = "unselected";
                         divs[j].className = "notshow";
                    }

         }
       }
        
       function tab_click(tabid,contentid){
           var lis = document.getElementById(tabid).getElementsByTagName("li");
           var divs = document.getElementById(contentid).getElementsByTagName("div");
           
           if(lis.length!=divs.length){alert("选项与内容框数量不一样!");return;}
          
           for(var i=0;i<lis.length;i++){
               
               lis[i].value = i;
               
               lis[i].addEventListener("click",function(e){
                    
                   for(var j=0;j<lis.length;j++){
                     lis[j].className = "unselected";
                     divs[j].className = "notshow";

                   }
                       
                     lis[e.target.value].className = "selected";
                     divs[e.target.value].className = "show";
               },false);
           }
       }
        
        window.onload = function(){
            
            initTabPaneClassName("tabs","contents");            
            tab_click("tabs","contents");
           
        }
    </script>
    
    </head>
    
    <body>
       
      <div id="tab_wrap">
      
          <div id="tabs">
            <ul>
               <li >选项一</li>  
               <li disable>选项二</li>  
               <li >选项三</li>  
               <li >选项四</li>  
            </ul>
          </div>
          <div id="contents">
               <div ></div>
               <div ></div>
               <div ></div>
               <div ></div>
          </div>
     </div>
        
    </body>
    
</html>


   转载请注明本文链接:https://tufeng.xyz/javascript/39.html,谢谢合作!

已有3条评论
  • 2020-04-04 12:13:07

    原来实现这么简单,太神奇了,我一定回去试试

  • 2020-04-04 12:14:08

    文章写得真长,详尽透彻

请关注微信公众号
微信二维码