Как сделать первую ссылку в таб меню сразу же активной без JS?

Question

[katiiisha]

При первом открытии сайта надо чтобы первый блок всегда был активный, а потом пропадал при переходе на другие ссылки.

<div class="tabs">

                    <div class="tabs__wrapper tabs__item_active " id="content-1">
                        <img class="tabs__item " src="image/italy1.png" alt="Итальянский дворик">
                        <img class="tabs__item" src="image/italy2.png" alt="Кафе в Италии">
                        <img class="tabs__item" src="image/italy3.png" alt="Канал в Италии">
                        <img class="tabs__item" src="image/italy4.png" alt="Вид на город в Италии">
                    </div>

                    <div class="tabs__wrapper" id="content-2">
                        <img class="tabs__item" src="image/italy1.png" alt="Итальянский дворик">
                        <img class="tabs__item" src="image/italy2.png" alt="Кафе в Италии">
                        <img class="tabs__item" src="image/italy3.png" alt="Канал в Италии">
                        
                    </div>

                    <div class="tabs__wrapper" id="content-3">
                        <img class="tabs__item" src="image/italy1.png" alt="Итальянский дворик">
                        <img class="tabs__item" src="image/italy2.png" alt="Кафе в Италии">
                        
                    </div>

                    <div class="tabs__wrapper" id="content-4">
                        <img class="tabs__item" src="image/italy1.png" alt="Итальянский дворик">
                    </div>

                    <div class="tabs__menu">
                        
                        <a href="#content-1" class="tabs__link "> ITALY </a>
                        <a href="#content-2" class="tabs__link"> AUSTRALIA</a>
                        <a href="#content-3" class="tabs__link">INDIA</a>
                        <a href="#content-4" class="tabs__link">BRAZIL</a>
        
</div>

  </div>

.tabs__wrapper{
    display: none;
}
.tabs__wrapper:target {
    display: block;
}

Comments

[Сергей delphinpro]

if (location.hash==='' || location.hash==='#') {
  location.hash = 'content-1';
}

Или открывать страницу сразу с хэшем

/page#content-1

[Арамаис Мирзоян]

А класс tabs__item_active разве не делает его активным?

[katiiisha]

Арамаис Мирзоян, в нем нет стилей, я не особо просто понимаю что туда надо записать

[Арамаис Мирзоян]

katiiisha, попробуйте display: block; прописать

Answer 1

[Sergey]

Если вы хотите создать табы без использования JavaScript, вы можете использовать чекбоксы и псевдоклассы

Простые табы на HTML и CSS. Как это сделать?
Как сделать табы на: чистом CSS / чистом JS / гряз...

<div class="container">
  <div class="tab">
    <label for="tab1">Tab 1</label>
    <label for="tab2">Tab 2</label>
    <label for="tab3">Tab 3</label>
</div>

<div>
    <input type="radio" id="tab1" name="tab" checked>
    <div class="tabcontent">
        <h3>Content for Tab 1</h3>
    </div>

    <input type="radio" id="tab2" name="tab">
    <div class="tabcontent">
        <h3>Content for Tab 2</h3>
    </div>

    <input type="radio" id="tab3" name="tab">
    <div class="tabcontent">
        <h3>Content for Tab 3</h3>
    </div>
</div>
</div>

.container {
  width:800px;
  margin: 0 auto;
}

.tab {
  display:flex;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab label {
  display: block;
  float: left;
  padding: 14px 16px;
  cursor: pointer;
  width: 33.3%;
  text-align: center;
}

input {
  display: none;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

input:checked + .tabcontent {
  display: block;
}