CSS - 多個分段控件失敗

所以我發現在http://www.prcvl.com/demos/segmented-controls上有一個很好的分段控制，我現在正在嘗試使其適應我的需求。CSS - 多個分段控件失敗

我的問題是當我添加多個控件到頁面時，點擊按鈕只會影響第一個分段控件。除了必須多次重新創建css /命名之外，有沒有人知道用另一種方法來實現這一點？也許通過利用jQuery的？

這裏是確切的代碼的小提琴：http://jsfiddle.net/kyV5U/

例子：

<ul class="segmented-control"> 
    <li id="any"><a href="#any">Any</a></li> 
    <li id="all"><a href="#all">All</a></li> 
</ul> 
<div style="clear:both;"></div> 

<ul class="segmented-control"> 
    <li id="any"><a href="#any">Any 2</a></li> 
    <li id="all"><a href="#all">All 2</a></li> 
</ul> 
<div style="clear:both;"></div>

提前感謝！

來源

2013-04-01 Geesu

id必須是唯一的。 – cimmanon

它只允許您從其中一個分段中進行選擇。比。能夠選擇所有的按鈕 – Geesu

等待，你想要選擇所有的按鈕，還是隻點擊控件中的按鈕？所以如果你點擊其中一個「任何」按鈕，那麼所有的「任何」按鈕將被選中？ – Rohrbs

您必須更改後續控件的ID和錨定標記。

<body> 
<ul class="segmented-control"> 
    <li id="any"><a href="#any">Any</a></li> 
    <li id="all"><a href="#all">All</a></li> 
</ul> 
<div style="clear:both;"></div> 

<ul class="segmented-control"> 
    <li id="any2"><a href="#any2">Any 2</a></li> 
    <li id="all2"><a href="#all2">All 2</a></li> 
</ul> 

<div style="clear:both;"></div> 
<ul class="segmented-control"> 
    <li id="any3"><a href="#any3">Any 3</a></li> 
    <li id="all3"><a href="#all3">All 3</a></li> 
</ul> 
</body>

來源

2013-04-01 19:28:09 Rohrbs

有道理，唯一的問題是它會取消選擇其他細分市場。 – Geesu

我不這麼認爲，因爲樣式依賴＃後面傳入的值。網頁如何知道您實際上是從哪一個值單擊的控件？ – Rohrbs

所以我應該利用jquery最有可能實現這一點，並根據父UL設置.click元素 - 是嗎？ – Geesu

CSS - 多個分段控件失敗

回答

相關問題