Прошу помощи по верстке

NULLED555

Хранитель порядка
Регистрация
19 Июн 2013
Сообщения
393
Реакции
543
Всем привет,
есть скрипт простых вкладок, код:
Код:
<style>
    .tab{cursor: pointer; display:block; padding: 18px; border-bottom: 1px solid #fff;}
    .tab:hover{background-color: #FFF8DC;}
    .tabs_color{background-color: #EFEFEF;}
    .panel,.radio{display:none;}
    #one:checked ~ .panels #one-panel,
    #two:checked ~ .panels #two-panel,
    #three:checked ~ .panels #three-panel,
    #four:checked ~ .panels #four-panel,
    #five:checked ~ .panels #five-panel,
    #six:checked ~ .panels #six-panel,
    #seven:checked ~ .panels #seven-panel,
    #eight:checked ~ .panels #eight-panel,
    #nine:checked ~ .panels #nine-panel,
    #ten:checked ~ .panels #ten-panel
    {display:block;}
</style>


<div class="container">
    <div class="row">
         
<input class="radio" id="one" name="group" type="radio" checked>
<input class="radio" id="two" name="group" type="radio">
<input class="radio" id="three" name="group" type="radio">
<input class="radio" id="four" name="group" type="radio">
<input class="radio" id="five" name="group" type="radio">
<input class="radio" id="six" name="group" type="radio">
<input class="radio" id="seven" name="group" type="radio">
   
<div class="tabs col-md-3">
    <div class="tabs_color">
          <label class="tab" id="one-tab" for="one">Первый пункт</label>
          <label class="tab" id="two-tab" for="two">Второй пункт</label>
          <label class="tab" id="three-tab" for="three">Третий пункт</label>
          <label class="tab" id="four-tab" for="four">Четвертый пункт</label>
          <label class="tab" id="five-tab" for="five">Пятый пункт</label>
          <label class="tab" id="six-tab" for="six">Шестой пункт</label>
          <label class="tab" id="seven-tab" for="seven">Седьмой пункт</label>
    </div>
</div>
   
<div class="panels col-md-9">     
    <div class="panel" id="one-panel"><p>первый блок</p></div>
    <div class="panel" id="two-panel"><p>второй блок</p></div>
    <div class="panel" id="three-panel"><p>третий блок</p></div>
    <div class="panel" id="four-panel"><p>четвертый блок</p></div>
    <div class="panel" id="five-panel"><p>пятый блок</p></div>
    <div class="panel" id="six-panel"><p>шестой блок</p></div>
    <div class="panel" id="seven-panel"><p>седьмой блок</p></div> 
</div>
             
    </div>
</div>

Как выглядит:
9d6671e78cbc.png


Задача:
выделить цветом активный на данный момент пункт меню (как на фото). При наведении ве OK^ нужно также сделать активный пункт. Подскажите как это можно сделать?
 
HTML:
  <style>
   input:checked {
    background: yellow;
   }
  </style>
как-то так
 
к сожалению блоки (первый блок, второй блок) не выводятся теперь(( помогите пожалуйста
 
Разобрался сам, привожу решение на java script т.к. мне нужно обернуть инпуты в div чтобы стилизовать и в этом случае псевдоселекторы
:checked ~ перестаю работать. Мое решение рабочее и возможно кому то понадобится и сыкономит как мне день – другой

164ef57f9f5b.png


Код:
<style>
#parent {margin: 0 auto;width: 800px;}

.menu a {
    display: inline-block;
    padding: 10px;
    color: black;
    text-decoration: none;
}
.menu a:hover {
    background: #FFF8DC;
}
.menu a.active {
    background: #FFF8DC;
}

.tabs .tab:not(.active) {
    display: none;
}
.tabs .tab {
    padding: 10px;
    background: #f2f2f2;
    height: 300px;
}

.col-md-3{display:block; float: left; width: 20%; }
.col-md-9{display:block; float: left; width: 70%; }
        </style>


<div id="parent">
    <div class="menu col-md-3">
        <a href="" class="active">вкладка 1</a>
        <a href="">вкладка 2</a>
        <a href="">вкладка 3</a>
    </div>
    <div class="tabs col-md-9">
        <div class="tab active">
            текст вкладки 1
        </div>
        <div class="tab">
            текст вкладки 2
        </div>
        <div class="tab">
            текст вкладки 3
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>

<script>
        let parent = document.querySelector('#parent');
        let links  = parent.querySelectorAll('.menu a');
        let tabs   = parent.querySelectorAll('.tab');
       
        for (let i = 0; i < links.length; i++) {
            links[i].addEventListener('click', function(event) {
                let activeLink = parent.querySelector('.menu a.active');
                activeLink.classList.remove('active');
               
                let activeTab = parent.querySelector('.tab.active');
                activeTab.classList.remove('active');
               
                tabs[i].classList.add('active');
                this.classList.add('active');
               
                event.preventDefault();
            });
        }
        </script>
 
Назад
Сверху