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

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^ нужно также сделать активный пункт. Подскажите как это можно сделать?
 

yaski

web3
Регистрация
21 Фев 2010
Сообщения
657
Реакции
499
HTML:
  <style>
   input:checked {
    background: yellow;
   }
  </style>
как-то так
 

NULLED555

Хранитель порядка
Регистрация
19 Июн 2013
Сообщения
393
Реакции
543
к сожалению блоки (первый блок, второй блок) не выводятся теперь(( помогите пожалуйста
 

NULLED555

Хранитель порядка
Регистрация
19 Июн 2013
Сообщения
393
Реакции
543
Разобрался сам, привожу решение на 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>
 
Сверху