仿360导航页面选项卡

选项卡在网页里很常见，特别是导航网站和新闻网站等，我通过借鉴360导航，制作了一个简单的选项卡。

1 概述

---

一个完整的选项卡应该包括 当前选中选项，未选中的选项，每一次选中时都会出现一个与之其对应的内容界面。下面直接上代码，根据详细代码来说明。

2 原理

---

2.1 html和css布局部分

    
        
        
        
    
    
        

            
猜你爱看
            

                

                    
科技
                    
文化
                    
教育
                    
游戏
                
            
            

                

                    

                        

                        
内容请自行添加(～￣▽￣)～
                    
                
                

                    

                        

                        
内容请自行添加(～￣▽￣)～
                    
                
                

                    

                        

                        
内容请自行添加(～￣▽￣)～
                    
                
                

                    

                        

                        
内容请自行添加(～￣▽￣)～
                    
                
            
        
    

在布局方面，要注意一个重点位置：

/* 切换选项时的样式 */
#main #tab li.active {
    border-top: 0;
    border-bottom: 0;
    border-top:3px solid green;
    background: #fcfcfc;
}

这个active就是我们切换选项时显示的样式，其实选项卡的原理很简单，就是切换选项时，让选中的选项的class变为这个激活时的active，然后就是要注意在content内容区，要在其ul元素内添加行间样式
style="display: block;"
然后在对应的内部样式表里将ul设置
style="display: none;"

2.2 JS部分

window.onload=function () {
  var tab=document.getElementById('tab');
  var content=document.getElementById('content');
  var aLi=tab.getElementsByTagName('li');
  var aUl=content.getElementsByTagName('ul');
  var now=content.getElementsByTagName('h2');
  var oDate=new Date();
  var aTops=['科技新闻','文化新闻','教育新闻','游戏新闻'];
                
  /* 根据上面数组的数据和当前日期，将其输出到h2标签内  */
  for(var k=0;k

js部分的原理其实也很简单，主要分三步：

第一步，用外层for循环为aLi的每一个li元素创建一个onclick点击事件，并将当前的i复制给index计数器变量;

第二步，为onclick点击事件创建一个匿名函数，并在其内使用for循环，循环内部将aLi当前的className设置为空字符串，并将其对应的 aUl设置隐藏。

第三步，匿名函数循环的外面，将aLi当前的className设置为'active',同时对应的 aUl设置显示，这里要使用this运算符和前面创建的index计数器变量。

OK，选项卡完成，经检验没有bug，可以放心食用(～￣▽￣)～

3 完整代码

---

下面是该实例的完整代码：

    
        
        
        
        
    
    
        

            
猜你爱看
            

                

                    
科技
                    
文化
                    
教育
                    
游戏
                
            

            

                

                    

                        

                        
内容请自行添加(～￣▽￣)～
                    
                
                

                    

                        

                        
内容请自行添加(～￣▽￣)～
                    
                
                

                    

                        

                        
内容请自行添加(～￣▽￣)～
                    
                
                

                    

                        

                        
内容请自行添加(～￣▽￣)～