一个简单的tab切换功能

作者：jiang2018.02.23来源：Web前端之家浏览：11337评论:0

关键词：tab 切换

一个简单的tab切换功能，直接上代码：

<!DOCTYPE html>
<html>
<head>
<meta Charset="UTF-8">

<script type="text/javascript" src="/demo/js/jq.js"></script>
<script type="text/javascript">
    $(function(){
      $("#tab li").click(function(){
          var idx=$("#tab li").index(this);
          $(this).addClass("on").siblings().attr("class","");
          $("#tab_con").children(":eq("+idx+")").show().siblings().hide();
      })
    })    
</script> 

<style type="text/css">
  #box{padding: 20px;font-size:12px}
  #box ul{margin:0;padding:0;list-style:none}
  #tab{height:25px; padding-left: 10px;border-bottom:1px solid #aacbee; }
  #tab li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
  #tab li:hover{color:#ca4e00; font-weight:bold;}
  #tab li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px; color:#CA4E00; font-weight:bold;}
  #tab_con{border-top:none;padding:10px 20px 20px 20px;}
  #tab_con .off{display:none;}
</style>

</head>
<body>
  <div id="box">
    <ul id="tab">
      <li>Home</li>
      <li>Product</li>
      <li>About</li>
    </ul>
    <ul id="tab_con">
      <li>Home Content</li>
      <li>Product Content</li>
      <li>About Content</li>
    </ul>
  </div>  
</body>
</html>

赏您的支持是我们创作的动力！