按鈕互斥點(diǎn)擊效果

• 舉例

舉例

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>

效果圖

當(dāng)點(diǎn)擊’本周’時(shí)，背景顏色改變，其他背景顏色變?yōu)槟J(rèn)顏色。本月、本年同理。
js代碼如下

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

選中三個(gè)元素，首先將元素背景顏色全部變?yōu)槟J(rèn)，然后獲取當(dāng)前被點(diǎn)擊元素，再改變背景顏色即可。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。