按鈕互斥點擊效果

• 舉例

舉例

html代碼

<div style="font-size: 0"><a onclick="chart('${type}',1)"><span id="week_chart" class="hover-color head-right right-week" style="background-color: #efefef">本周</span></a><a onclick="chart('${type}',2)"><span id="month_chart" class="hover-color head-right right-month">本月</span></a><a onclick="chart('${type}',3)"><span id="year_chart" class="hover-color head-right right-year">本年</span></a></div>

效果圖

當點擊’本周’時，背景顏色改變，其他背景顏色變為默認顏色。本月、本年同理。
js代碼如下

$("span.hover-color").click(function(){var $a = $("span.hover-color");$a.css("background-color","#ffffff")$(this).css("background-color","#efefef")})

選中三個元素，首先將元素背景顏色全部變為默認，然后獲取當前被點擊元素，再改變背景顏色即可。

總結

以上是生活随笔為你收集整理的按钮互斥点击效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。