Как настроить прицел на несколько 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" в содержании в появляется в нужном месте. Но содержание исчезает.

Как я могу остановить это?

Мои divs расположены рядом друг с другом. Таким образом, один div не перекрывает другого.

Answer 1

Если я правильно понимаю, что вы пытаетесь сделать, это невозможно, используя атрибут :target. Цель всегда является частью URL-адреса после #, и всегда может быть только одна цель за раз.

Это означает, что всякий раз, когда вы активируете цель, все остальные элементы снова будут скрыты. Используя этот метод, вы не можете показывать содержимое на основе двух разных целей.