<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .header{ background-color: #eeeeee; height: 40px; width: 600px; margin: 0 auto; } .header .menu{ float: left; border-right: 1px solid black; padding: 0 5px; line-height: 40px; cursor: pointer; } .content{ height: 100px; border: 1px solid black; width: 600px; margin: 0 auto; } .active{ background-color: #dddddd; } </style> </head> <body> <div class="header"> <div class="menu" >菜单一</div> <div class="menu" >菜单二</div> <div class="menu" >菜单三</div> </div> <div class="content"> <div class="hide" >内容一</div> <div class="hide" >内容二</div> <div class="hide" >内容三</div> </div> <script src="../jquery-2.12.4.js"></script> <script> $('.menu').click(function () { $(this).addClass('active'); var tag = $(this).index(); $('.content').children().eq(tag).removeClass('hide').siblings().addClass('hide') }) </script> </body> </html>