CSS - 다중 세그먼트 컨트롤 실패

그래서 http://www.prcvl.com/demos/segmented-controls에서 큰 세분화 된 컨트롤을 발견했으며 지금은이를 내 필요에 맞게 조정하려고합니다.CSS - 다중 세그먼트 컨트롤 실패

문제는 페이지에 여러 컨트롤을 추가 할 때 버튼을 클릭하면 첫 번째 세그먼트 컨트롤에만 영향을줍니다. css/naming을 여러 번 다시 만들어야하는 것 외에도 누구나이 작업을 수행 할 수있는 또 다른 방법을 알고 있습니까? 어쩌면 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 - 다중 세그먼트 컨트롤 실패

답변

관련 문제