CSS - показать/скрыть контент с именем привязки

Веб-сайт с одной страницей

У меня есть сайт с одной страницей (только одна страница). Я могу перемещаться с помощью меню, чтобы перейти к различным частям страницы с именем привязки, точно так же (см. Врезку):

Документы WordPress

Скрыть другие вещи

Я хочу скрыть вещи, которые не принадлежат текущей активной части страницы, и просто покажу информацию о той части, на которую я смотрю.

Вопрос (ы)

  • Могу ли я скрыть материал, который не является частью текущего #anchor_part с только CSS?
  • Вы видели какие-либо сайты, которые уже делают это?

ОТВЕТЫ

Ответ 1

Рабочий пример

Попробуйте этот HTML-код

<a href="#a">a</a>
<a href="#b">b</a>
<a href="#c">c</a>

<div id="a" class="page"> this is a id</div>
<div id="b" class="page"> this is b id</div>
<div id="c" class="page"> this is c id</div>

и Css

#a, #b, #c{
    display:none;
}
#a:target{
    display:block;
}
#b:target{
    display:block;
}
#c:target{
    display:block;
}

Ответ 2

да, вы можете сделать это с помощью только css, first creat <div> с определенной шириной и высотой и переполнением до скрытого, затем поместите ваши вещи в этот div рядом друг с другом

<a href="#firstWindow">firstWindow</a>
<a href="#secondWindow">secondWindow</a>
<a href="#thirdWindow">thirdWindow</a>
<div class="window">
    <div id="firstWindow" class="window">
         firstWindow
    </div>
    <div id="secondWindow" class="window">
         secondWindow
    </div>
    <div id="thirdWindow" class="window">
         thirdWindow
    </div>
</div>

.window{
   width:300px;
   height:300px;
   overflow:hidden;
 }

что-то вроде выше; обратите внимание, что вы можете использовать этот html/css, если у вас есть постоянная высота, высота вашего материала должна быть одинаковой.