按tab就切换屏幕|tab切换实现的几种方法及示例

更新时间：2020-03-13 来源：php常用代码手机版 字体：大中小

【www.bbyears.com--php常用代码】

首先，写出tab的框架，加上最简单的样式，代码如下：








  
    
      
        标题一
        标题二
        标题三
        标题四
      
    
    
      内容一
      内容二
      内容三
      内容四

　　现在的显示效果如下图：

　　四个tab标题和四个内容区都显示在了页面中，现在要实现tab切换效果，即点击标题一，内容一显示出来，其他内容不显示；点击标题二，内容二显示出来，其他内容不显示……

　　那么，整体思路很简单，给四个标题绑定事件，触发的时候对应的内容显示，其他的内容隐藏。

　　方法一：点击标题对应的内容显示，非点击标题对应的内容隐藏。代码如下：






<script>
  function tab(pid){
      var tabs=["tab1","tab2","tab3","tab4"];
      for(var i=0;i<4;i++){
        if(tabs[i]==pid){
            document.getElementById(tabs[i]).style.display="block";
        }else{
            document.getElementById(tabs[i]).style.display="none";
        }
      }
  }
</script>


  
      
      
          标题一
          标题二
          标题三
          标题四
      
      
      
        内容一
        内容二
        内容三
        内容四

　　方法二：先设置所有内容隐藏，然后点击标题对用的内容显示。代码如下：






<script>
  function changeTab(tabCon_num){
    for(i=0;i<=3;i++) { 
      document.getElementById("tabCon_"+i).style.display="none"; //将所有的层都隐藏 
    } 
      document.getElementById("tabCon_"+tabCon_num).style.display="block";//显示当前层 
  } 
</script>


  
    
      
        标题一
        标题二
        标题三
        标题四
      
    
    
      内容一
      内容二
      内容三
      内容四

　　方法三：显示和隐藏通过是有拥有class控制，先把所有的内容隐藏dispaly设为none，而该class的display设置为block，遍历所有标题节点和内容节点，点击标题后，该标题节点和对用的内容节点拥有class，其他的没有。代码如下：








  
    
      
        标题一
        标题二
        标题三
        标题四
      
    
    
      内容一
      内容二
      内容三
      内容四
    
  

<script>
  var tabs=document.getElementById("tab").getElementsByTagName("li");
  var divs=document.getElementById("tabCon").getElementsByTagName("div");
  for(var i=0;i

　　该方法的缺点是，内容块的div下面不能再有div标签了。

　　方法四：不用js，用“input:checked”来做tab切换，先把所有的内容隐藏，被选中的内容显示。代码如下：





input:checked实现tab切换



  
      
      标题一
      
      标题二
      
        
          内容一
        
        
          内容二

　　改方法的缺点是，不同区域切换只能通过点击。

几个不同的tab切换示例

一、仿”中国人民大学“官网的tab切换，背景是图片，效果图如下：

鼠标移到新闻时的效果

鼠标移到公告时的效果

鼠标移到交流时的效果

学术、交流和文体的内容为空，我没有写。完整代码如下：








  
    
      
        新闻
        公告
        学术
        交流
        文体
      
    
    
      
        塞浦路斯总统尼科斯・阿纳斯塔西亚迪斯到访人民大学 获...
        中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)
        中国人民大学认真落实党风廉政建设主体责任和监督责任(2015-10-23)
        中国人民大学第四届体育文化节开幕 2015年新生运动会举行(2015-10-18)
        中国人民大学“一带一路”经济研究院首席顾问聘任仪式举行 土库曼斯坦驻华大使拉
      
      
        2015-2016学年第一学期第8周校领导接待日安排...(2015-10-22)
        关于举办中国人民大学第二届青年管理干部岗位技能竞赛的...(2015-09-30)
        我校第十六门中国大学视频公开课上线，请大家积极关注...(2015-10-26)
        关于组织我校青年教师参观鲁迅博物馆社会实践活动的通知...(2015-10-23)
        关于举办中国人民大学第四届教工羽毛球“1+1”团体联...(2015-10-23)
        中国人民大学MOOCs课程录制演播厅设备购置项目中标...(2015-10-23)
      
      内容三
      内容四
      内容五
    
  

<script>
  var tabs=document.getElementById("tab").getElementsByTagName("li");
  var divs=document.getElementById("tabCon").getElementsByTagName("div");
  for(var i=0;i

此实例是很简单也很常见的tab切换，js中多了一点的就是改变了背景图片的位置，其他的就是简单的样式。

二、上一篇讲了不用js，用input:checked来实现tab切换效果，现在就用此原理加上css3做一个漂亮的实例，在切换的时候，内容区是渐现的。效果图如下：

鼠标点击HTML/CSS时的效果

鼠标点击AJAX时的效果

完整代码如下：





input:checked实现tab切换



  
      
      HTML/CSS
      
      JavaScript
      
      AJAX
      
      Sever Side
      
        
          HTML文本标签语言
          HTML 是通向 WEB 技术世界的钥匙。HTML 非常容易学习！你会喜欢它的！
        
        
          JavaScript脚本语言
          JavaScript 是世界上最流行的脚本语言。

             JavaScript 是属于 web 的语言，它适用于PC、笔记本电脑、平板电脑和移动电话。

             JavaScript 被设计为向 HTML 页面增加交互性。
          
        
        
          AJAX阿贾克斯
          AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

          AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

          AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
          
        
        
        Sever Side服务器脚本
          SQL 是用于访问和处理数据库的标准的计算机语言。

          ASP 是创建动态交互性网页的强大工具。

          ADO 指 ActiveX 数据对象（ActiveX Data Objects）。

          PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。

          VBScript 是微软公司出品的脚本语言。