Как настроить HREF для нескольких Div?

Question

Я использовал метод, показанный в разделе Как нацелить href на 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 не перекрывает другой.

Answer 1

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

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