JavaScript实现的简单Tab点击切换功能示例

本文实例讲述了Javascript实现的简单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
      
    
  
  

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

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript切换特效与技巧总结》、《Javascript遍历算法与技巧总结》、《Javascript查找算法技巧总结》、《Javascript动画特效与技巧汇总》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。