href를 여러 div에 타겟팅하는 방법은 무엇입니까?

Question

How to target the href to div 에 표시된 방법을 사용하여 href를 div로 타겟팅했습니다. 그것은 효과가 있었다. 하지만 다른 레벨을 추가해야합니다.

HTML

<ul > 
    <li class="active"><a href="#m1">home</a></li> 
    <li><a href="#m2">settings</a></li> 
</ul> 

<div class="target"> 
    <div id="m1"> 
     <ul > 
      <li class="active"><a href="#subm1-1" title="Home1">Item1</a></li> 
      <li><a href="#subm1-2">Item 2</a></li> 
     </ul> 
    </div> 

    <div id="m2"> 
     <ul> 
      <li class="active"><a href="#subm2-1" title="Home1">Item1</a></li> 
      <li><a href="#subm2-2">Item 2</a></li> 
     </ul> 
    </div> 
</div> 

<div class="target123"> 
    <div id="subm1-1"> 
     content1 
    </div> 
    <div id="subm1-2"> 
     content2 
    </div> 
    <div id="subm2-1"> 
     content3 
    </div> 
    <div id="subm2-2"> 
     content4 
    </div> 
</div> 

CSS

.target > div { 
    display:none; 
} 

.target > div:target{ 
    display:block; 
} 


.target123 > div { 
    display:none; 
} 

.target123 > div:target{ 
    display:block; 
} 

올바른 위치에 나타납니다에서 나는 내용의 링크 "항목 1"을 클릭하면 내 문제입니다. 그러나 내용은 사라집니다.

어떻게하면 안되나요?

내 div는 서로 옆에 배치됩니다. 따라서 한 div는 다른 div와 겹치지 않습니다.

Answer 1

내가하려는 일을 정확하게 이해하면 :target 속성을 사용하여 수행 할 수 없습니다. 대상은 # 뒤에 항상 URL의 일부이며 항상 한 번에 하나의 대상 만있을 수 있습니다.

즉, 대상을 활성화 할 때마다 다른 모든 요소가 다시 숨겨집니다. 이 방법을 사용하면 동시에 두 개의 다른 대상을 기반으로 내용을 표시 할 수 없습니다.