jQuery-Tab切换_jquery

切换布局：


<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>切换练习</title>     <link rel="stylesheet" href="css/demo.css">     <script src="js/jquery.min.js"></script>     <script src="js/demo.js"></script> </head>  <body>     <ul id="tab">         <li class="tabon">标签1</li>         <li>标签2</li>         <li>标签3</li>     </ul>     <div class="content current-tab">         标签1内容     </div>     <div class="content">         标签2内容     </div>     <div class="content">         标签3内容     </div> </body>  </html>


body{font-size: 14px;} ul,li{padding:0;margin: 0;list-style: none;} ul{overflow: hidden;} li{float: left;background: #ccc;margin-right: 10px;padding:5px;cursor: pointer;} .tabon{background:#666;color:#fff;} .content{background: #666;width: 300px;height: 100px;padding: 5px;display:none;} .current-tab{display: block;}


切换的实现：


var timeoutid; $(document).ready(function() {     $("#tab li").each(function(index) {         var liNode = $(this);         $(this).mouseover(function() {             timeoutid = setTimeout(function() {                 $("div.current-tab").removeClass("current-tab");                 $(".content").eq(index).addClass("current-tab");                 $("#tab li.tabon").removeClass("tabon");                 liNode.addClass("tabon");                             }, 300);         }).mouseout(function() {             clearTimeout(timeoutid);         })     }) });