Переопределение состояния по умолчанию для чистого CSS - PullRequest
Новая
       25

Переопределение состояния по умолчанию для чистого CSS

0 голосов
/ 24 апреля 2018

Я делал меню вкладок на веб-сайте. Довольно простая функция: каждая вкладка содержит изображения, и они появляются только при нажатии правой вкладки. Это для онлайн-курса, который я беру, и мы должны делать это только с CSS. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу заставить отображаться первую вкладку по умолчанию, если я это сделаю, она не исчезнет (css не будет переопределять display: block), и если она скрыта по умолчанию, я не соблюдая требования курса.

Вот как я это сделал:

CSS 

#tabmenu > div {
  display: none;
}

#tabmenu > a {
  position:relative;
  left:35%;
  text-decoration: none;
  background-color: rgb(229,229,229);
  color: rgb(100,104,109);
  padding: 15px 15px 15px 15px;
  font-family: 'faw',sans-serif;
  margin:-3px -3px -3px -3px ;
  top:-50px;
}

#tabmenu > a:hover, #tabmenu > a:active {
  background-color: rgb(92,173,211);
  color: white;
  box-shadow: 0px 3px rgb(62,143,181);
}

#tabmenu > a:hover:after, #tabmenu > a:active:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border-top: 10px solid rgb(62,143,181);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transform: translateX(-50%);
}

#tous:target {
  display: block;
  position: relative;
  top:20px;
}

#sobres:target {
  display: block;
  position: relative;
  top: 20px;
}

#imaginatifs:target {
  display: block;
  position: relative;
  top: 20px;
}

#classiques:target {
  display: block;
  position: relative;
  top: 20px;
}

и в HTML 

<div id="tabmenu" class="greyBg">
  <a href="#tous" class="sel">Tous</a>
  <a href="#sobres" class="sel">Sobres</a>
  <a href="#imaginatifs" class="sel">Imaginatifs</a>
  <a href="#classiques" class="sel">Classiques</a>

  <div id="tous">
    <div class="icontain">
      <div class="icaption">
        <img class="pico" src="images/ico/eye.png" alt="ico">
        <h3>Image 1</h3>
        <p>©WebAgency</p>
      </div>
      <img src="images/portfolio/01.jpg" alt="ico">
    </div>
  </div>

  <div id="sobres">
    <div class="icontain">
      <div class="icaption">
        <img class="pico" src="images/ico/eye.png" alt="ico">
        <h3>Image 5</h3>
        <p>©WebAgency</p>
      </div>
      <img src="images/portfolio/05.jpg" alt="ico">
    </div>
  </div>

</div><!-- #tabmenu -->

Я включил только две вкладки и изображения, но вы поняли (не хочу, чтобы это было длиной в 5 страниц)

В любом случае, вкладка #tous должна отображаться по умолчанию, прежде чем пользователь что-нибудь нажмет, а я просто не могу понять.

Как я уже сказал, я должен делать это только в CSS, я знаю, что JS и jQuery легко решат это для меня (и я бы хотел это сделать).

1 Ответ

0 голосов
/ 26 апреля 2018

Поскольку метод :target работает, то есть он выделяет выбранный элемент из хеш-части URL-адреса, единственное решение без JavaScript - открыть демонстрационную версию с таким URL-адресом.

В вашем случае, например: http://name.github.io/demo#tous. URL содержит #tous по умолчанию. Надеюсь, это поможет.

...