Как сделать первую ссылку в таб меню сразу же активной без JS?
При первом открытии сайта надо чтобы первый блок всегда был активный, а потом пропадал при переходе на другие ссылки.
<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> |
<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; } |
.tabs__wrapper{ display: none; } .tabs__wrapper:target { display: block; }
Дополнительно:
if (location.hash==='' || location.hash==='#') { location.hash = 'content-1'; } |
if (location.hash==='' || location.hash==='#') { location.hash = 'content-1'; }
Или открывать страницу сразу с хэшем
/page#content-1
Если вы хотите создать табы без использования 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> |
<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; } |
.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; }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать первую ссылку в таб меню сразу же активной без использования JavaScript, можно применить CSS. Вам нужно добавить класс "active" к первой ссылке в вашем таб меню и стилизовать этот класс так, чтобы он выглядел как активный элемент.
Пример кода на языке HTML и CSS:
<div class="tab-menu"> <a href="#" class="active">Вкладка 1</a> <a href="#">Вкладка 2</a> <a href="#">Вкладка 3</a> </div>
.tab-menu a { padding: 10px 15px; text-decoration: none; color: #333; } .tab-menu a.active { background-color: #f0f0f0; color: #000; }
В приведенном выше примере первая ссылка имеет класс "active", который задает стили для активной вкладки. Вы можете добавить дополнительные стили и анимации по вашему усмотрению.
Таким образом, применяя CSS, вы можете сделать первую ссылку в таб меню сразу же активной без использования JavaScript.