JavaScript如何实现的简单Tab点击切换功能-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

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

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

成都创新互联公司成都企业网站建设服务,提供成都网站设计、做网站网站开发,网站定制,建网站,网站搭建,网站设计,响应式网站,网页设计师打造企业风格网站,提供周到的售前咨询和贴心的售后服务。欢迎咨询做网站需要多少钱:13518219792

具体如下:




  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://kswsj.cn/article/jjpeij.html

其他资讯