JavaScript如何实现的简单Tab点击切换功能-创新互联

小编给大家分享一下JavaScript如何实现的简单Tab点击切换功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

专注于为中小企业提供网站制作、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业朝阳免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

具体如下:




  www.jb51.net tab点击切换
  
  *{
    padding: 0;
    margin: 0;
  }
  #example{
    width: 500px;
    height: 400px;
    margin: 0 auto;
  }
  #example .hd ul li{
    display: inline-block;
    width: 32%;
    height: 36px;
    line-height: 36px;
    border-radius: 5px;
    background-color: #333;
    text-align: center;
    color: #fff;
  }
  #example .hd ul li.current{
    background-color: green;
  }
  #example .bd{
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  #example .bd ul li{
    display: none;
  }
  #example .bd ul li.current{
    display: block;
  }
  


  
    
      
            Beijing         
  • Shanghai
  •         
  • Guangzhou
  •       
    
           
            This is Beijing!         
  • This is Shanghai
  •         
  • This is Guangzhou
  •       
    
  
     var hd = document.getElementsByClassName("hd")[0].getElementsByTagName("li");   var bd = document.getElementsByClassName("bd")[0].getElementsByTagName("li");   for (var i = 0; i < hd.length; i++) {     hd[i].onclick = function(){       doTabs(this);     }   }   function doTabs(obj){     for (var i = 0; i < hd.length; i++) {       if(hd[i]==obj){         hd[i].className = "current";         bd[i].className = "current";       }else{         hd[i].className = "";         bd[i].className = "";       }     }   }   

使用本站HTML/CSS/JS在线运行测试工具:http://tools.jb51.net/code/HtmlJsRun,可得到如下测试运行效果:

JavaScript如何实现的简单Tab点击切换功能

以上是“JavaScript如何实现的简单Tab点击切换功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前题目:JavaScript如何实现的简单Tab点击切换功能-创新互联
网站链接:http://myzitong.com/article/dihghe.html

其他资讯