<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>切换栏</title> <style> .tab { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 44px; line-height: 44px; border-bottom: 1px solid #ff3c3c; background-color: #eee; } .tab .item { display: block; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 100%; font-size: 14px; text-align: center; color: #333; text-decoration: none; } .tab .cur { height: 42px; border-bottom: 2px solid #ff3c3c; color: #ff3c3c; } .content { background-color: #fff; } </style> </head> <body> <div class="tab"> <a href="javascript:;" class="item cur">菜单一</a> <a href="javascript:;" class="item">菜单二</a> </div> <div class="content"> <!-- 菜单一 内容块 --> <div class="lists">1111</div> <!-- 菜单二 内容块 --> <div class="lists">2222</div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script> $(function () { //页面加载：菜单一 默认显示 var itemIndex = 0; $('.lists').eq(itemIndex).show().siblings('.lists').hide(); // 点击切换菜单栏 $('.tab .item').on('click', function () { var $this = $(this); itemIndex = $this.index(); $this.addClass('cur').siblings('.item').removeClass('cur'); $('.lists').eq(itemIndex).show().siblings('.lists').hide(); }); }); </script> </body> </html>
