切换布局：
<!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); }) }) });