台灣最大程式設計社群網站
線上人數
1544
 
會員總數:243287
討論主題:188072
歡迎您免費加入會員
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
button設計
價值 : 20 QP  點閱數:456 回應數:6

樓主

Andy
門外漢
0 4
70 8
發送站內信

按鈕設計我知道有action是可以在滑鼠點下去的時候顯示的效果。
一般按鈕點下去時會有一種被壓下去的感覺,可是當滑鼠放開又會彈回來。

我今天有一排圖片按鈕,我希望當使用者點選按鈕時,維持壓下去的感覺,讓使用者隨時知道目前選擇的是哪個圖片。
比如有 A B C D 四個圖片按鈕,當我選擇A時顯示A圖片,並讓A按鈕維持選擇狀態的感覺,當選則B按鈕時換B維持選擇狀態,而A按鈕會彈回來。

不知道網頁設計有沒有方法能實現這種感覺。 請各位大大提供意見!

搜尋相關Tags的文章: [ CSS按鈕 ] , [ HTML按鈕 ] ,
本篇文章發表於2017-08-28 11:17
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
最有價值解答

haoaho
檢舉此回應
可以利用jquery去設定被點選按鈕的class
再利用css設定class的樣式
即可以讓使用者知道剛剛選擇的按鈕

jquery:


css:




參考連結
本篇文章回覆於2017-08-28 13:30
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

Andy
檢舉此回應
請問有沒有辦法不要透過jquery而是透過javascript或是css?

jquery還沒學呀! 慚愧..
本篇文章回覆於2017-08-28 14:20
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
如果想靠css處理的話。也不是不行。

只要利用一下:active跟:hover的處理就行了

可將:active的css設計成像是按住的畫面。
要生動一點就是再搭配一下:hover可以有在按鍵上的感覺就行了。
以下給你基本的案例讓你參考。美化的部份就自行處理了。


本篇文章回覆於2017-08-28 15:57
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
作者回應

Andy
檢舉此回應
active跟hover的效果我知道,我想要的是按鈕放開後依然維持點選時的那種效果。

transform的用法倒是讓我有一些想法,在網路上也查了一些關於更改class的方法,最後想法算是按鈕按下去後將class改成點選時的效果(就算放開看起來也有凹下去的感覺),當選擇其他按鈕後再把class改回最原本的(2種class切換)。

謝謝1樓,我會努力學jquery~
謝謝3樓,回答內容中讓我有一些想法。
本篇文章回覆於2017-08-28 17:37
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
你要的東西其實跟核取有相關。我被你的「一般按鈕點下去時會有一種被壓下去的感覺,可是當滑鼠放開又會彈回來。」誤會了。

你可以用如下的方式來處理
<style type="text/css">
.abgne-menu-20140101-2 input[type="checkbox"] {
display: none;
}
.abgne-menu-20140101-2 input[type="checkbox"] + label {
display: inline-block;
background-color: #ccc;
cursor: pointer;
padding: 5px 10px;
}
.abgne-menu-20140101-2 input[type="checkbox"]:checked + label {
background-color: #f3d42e;
}
</style>

<body>
<h3>專長(多選)</h3>
<div class="abgne-menu-20140101-2">
<input type="checkbox" id="jquery" name="skill" checked="">
<label for="jquery">jQuery</label>

<input type="checkbox" id="css3" name="skill">
<label for="css3">CSS3</label>

<input type="checkbox" id="html5" name="skill">
<label for="html5">HTML5</label>

<input type="checkbox" id="angularjs" name="skill">
<label for="angularjs">AngularJS</label>
</div>

</body>
</pre>
這樣就可以達到你要的效果。(當然美化的部份你要自行處理)
本篇文章回覆於2017-08-28 17:51
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
6樓
不錯的參考

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應

標簽沒用好。重po一下
本篇文章回覆於2017-08-28 18:01
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.