Как я могу стилизовать загрузочную динамическую навигацию по имени дочернего класса?

Question

Когда я нажимаю на один из элементов навигации, <a> получает класс "активный", как я могу установить этот класс на <li>?Или как я могу достичь родительского класса от ребенка с помощью CSS?Также для этого я использую Bootstrap 4.0

<ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Quality</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Design</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Programming</a>
                        </li>
                    </ul>

Answer 1

Нет, это невозможно.Вы можете определить правила для потомка, например

#myTab li {
    background-color: black;
}

или для детей, например

#myTab > li {
    background-color: black;
}

Но вы не можете определить правила для родителя на основе дочернего элемента с помощью CSS.Вам нужно будет использовать Javascript или подумать о своей структуре и реорганизовать ее.

Answer 2

В настоящий момент не возможно получить доступ к родительскому классу из дочернего элемента с помощью CSS.

jQuery имеет селектор :has(), на который вы, возможно, захотите взглянуть.

Ближайшая ставка, которую вы можете сделать с помощью селектора CSS, вероятно, :focus-within, которая позволяет получить доступ к этому родителю при нажатии. Однако это не совместимо с IE / Edge и некоторыми другими мобильными браузерами.

$('.nav-item:has(.active)').addClass('highlight');
$('.nav-item:has(.active)').css('color','lime');

.highlight {
  background: red;
  /*what ever style u need*/
}

.item:focus-within {
  background: red;
  color: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>jQuery Selector</h1>
<li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Quality</a>
</li>
<li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Design</a>
</li>
<li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Programming</a>
</li>

<h1>CSS Selector (click To View)</h1>
<li class="item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Quality</a>
</li>
<li class="item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Design</a>
</li>
<li class="item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Programming</a>
</li>

Answer 3

Активный класс для тега устанавливается Bootstrap, и для установки класса на li тоже потребуется код js / jquery для прослушивания щелчков на li и ручного добавления класса в тег li.

В jquery это было бы что-то вроде:

    $('li').click(function() {
      $(this).addClass('active');
    });

Но проблема с вышеприведенным подходом заключается в том, что вы также должны удалить активный класс в ранее активном элементе li перед добавлением класса в элемент li, по которому щелкнули.

Исходя из того, чего вы хотите достичь, и если вы можете описать, почему вы хотите добавить класс к элементу li, мы могли бы предоставить вам лучший подход, чем этот. Пожалуйста, попробуйте описать вашу проблему более подробно, чтобы мы могли помочь вам лучше.