常见面试题:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery/jquery-1.11.1.min.js"></script> <style> *{ margin:0px; padding:0px; list-style: none; } .main{ 500px; height:500px; margin:auto; margin-top:100px; } .tab{ overflow:hidden } .tab li{ float:left; 100px; height:30px; border:1px solid #76b4ff; border-bottom:none; margin-right:5px; } .tab li:hover{ background-color:#7EC4CC; color:white; } .check{ background-color:#7EC4CC; color:white; } .content{ border:1px solid #76b4ff; height:200px; 500px; } .content li{ } .hidden{ display:none; } </style> </head> <body> <div class="main"> <div class="tab"> <ul> <li>new</li> <li>text</li> <li>pic</li> </ul> </div> <div class="content"> <ul> <li>我是第一页</li> <li>我是第二页</li> <li>我是第三页</li> </ul> </div> </div> </body> <script> $(".tab li").click(function(){ $(".tab li").removeClass("check"); $(".content li").addClass("hidden"); $(this).toggleClass("check"); var num=$(this).index(); switch(num){ case 0: $(".content li:eq("+num+")").removeClass("hidden"); break; case 1: $(".content li:eq("+num+")").removeClass("hidden"); break; case 2: $(".content li:eq("+num+")").removeClass("hidden"); break; } }); </script> </html>