jquery實現菜單的切換：

 

效果圖：

 

 

js文件：

<script type="text/javascript"> $(function(){ $("#tab_condition_btn li").click(function(i) { $(this).siblings('li').removeClass("tab_condition_check_btn"); // 刪除其他兄弟元素的樣式 $(this).addClass("tab_condition_check_btn"); }); }); </script>

 

html文件：

<div class='groupBtn tab_condition_btn' id="tab_condition_btn"> <ul> <li class="tab_condition_check_btn">月</li> <li>周</li> <li>日</li> </ul> </div>

css文件：

.groupBtn{ position: absolute; z-index: 999; left: 16%; top: 277px; } .tab_condition_btn>ul { border-radius: 10px; } .tab_condition_btn>ul>li { width: 36px; height: 25px; list-style: none; float: left; font-family: 'Microsoft Yahei',verdana; font-size: 12px; cursor: pointer; text-align: center; padding: 6px 20px; cursor: pointer; line-height: 25px; border: 1px solid #fff; background: #13A993; color: #fff; } .tab_condition_check_btn { color: #13A993 !important; background: #fff ! important; } .tab_condition_btn>ul>li:hover { padding: 6px 20px; font-family: 'Microsoft Yahei',verdana; font-size: 12px; color: #17b392; background: #d2f5f5; border:1px solid rgba(195,204,202,1); cursor: pointer; }