Как изменить цвет панели вкладок в HTML / CSS?

Question

Я хочу изменить цвет по умолчанию (синий) панели вкладок.

Я хочу, чтобы, когда пользователь нажимает на любую вкладку, она становилась "оранжевой", а остальная часть цвета вкладки оставалась "серой".

Я пытаюсь использовать следующий код:

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#menu1" style="color:orange">Description</a>
</li>
<li class="nav-item">
 <a class="nav-link" data-toggle="tab" href="#menu2" style="color:gray">Product Reviews</a>
</li>
<li class="nav-item">
 <a class="nav-link" data-toggle="tab" href="#menu3" style="color:gray">Specifications</a>
</li>
<li class="nav-item">
 <a class="nav-link" data-toggle="tab" href="#menu4" style="color:gray">Warranty</a>
</li>

</ul>


<!-- Start Tab panes -->
<div class="tab-content">

<!-- Start Tab Pane Menu 1 -->
<div id="menu1" class="container tab-pane active" style="color:orange"><br>
 <p>Hello Description!</p>
</div>
<!-- End Tab Pane Menu 1 -->


<!-- Start Tab Pane Menu 2 -->

<div id="menu2" class="container tab-pane fade" style="color:orange"><br>
 <p>Hello Product Reviews!</p>
</div> <!-- End Second Container -->

<!-- End Tab Pane Menu 2 -->

<!-- Start Tab Pane Menu 3 -->

 <div id="menu3" class="container tab-pane fade" style="color:orange"><br>
   <p>Hello Store Info!</p>
 </div> <!-- End Second Container -->

<!-- End Tab Pane Menu 3 -->

 <!-- Start Tab Pane Menu 4 -->

 <div id="menu4" class="container tab-pane fade" style="color:orange"><br>
   <p>Hello Store Reviews!</p>
 </div> <!-- End Second Container -->

 <!-- End Tab Pane Menu 4 -->

Я нажал на вкладку "Отзывы о товаре" на изображении ниже. Но цвет остается «серым» вместо «оранжевого» * ​​1010 *

После того, как я нажал на вкладку «Отзывы о товаре», цвет вкладки «Описание» не изменился на «серый», и он все еще показывает «оранжевый»

что я делаю не так?

Answer 1

Вы можете изменить свои изменения, как показано ниже. Это помогло бы вам.

Изменения HTML;

<div id="header">
    <div id="menu_tabs">
        <ul class="current_page_itemm">
            <li class="current_page_item"><a href="#">Description</a>

            </li>
            <li><a href="#">Product Reviews</a>

            </li>
            <li><a href="#">Specifications</a>

            </li>
            <li><a href="#">Warranty</a>

            </li>

        </ul>
    </div>
</div>

Изменения JavaScript;

$(document).ready(function () {
    $('#menu_tabs ul li a').click(function (val) {
        $('#menu_tabs ul li').removeClass('selected');
        $(val.currentTarget).parent('li').addClass('selected');
    });
});

Изменения CSS:

#menu_tabs ul li.selected {
    background: #FFA500;
    color: #FFA500;
}
#menu_tabs ul {
    margin: 0;
    padding: 25px 0 0 20px;
    list-style: none;
    line-height: normal;
}
#menu_tabs li {
    display: gray;
    float: left;
    background: gray;
}
#menu_tabs a {
    display: block;
    float: left;
    margin-right: 17px;
    padding: 5px 8px;
    text-decoration: none;
    font: 20px Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
}
#menu_tabs a:hover {
    text-decoration: underline;
    background: #FFA500;
    color: #FFFFFF;
}
#menu_tabs a:active {
    background: #FFA500;
    color:black;
}

Ниже приведенрезультат для кода выше;

] 1

Answer 2

Удалите встроенные стили и просто добавьте это в теге стиля:

.nav-item > a.active{
  color: orange !important;
  }

Ваш новый код будет выглядеть так:

.nav-item > a.active{
      color: orange !important;
      }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      
    
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
     <a class="nav-link active" data-toggle="tab" href="#menu1">Description</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" data-toggle="tab" href="#menu2">Product Reviews</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" data-toggle="tab" href="#menu3">Specifications</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" data-toggle="tab" href="#menu4>Warranty</a>
    </li>
    
    </ul>
    
    
    <!-- Start Tab panes -->
    <div class="tab-content">
    
    <!-- Start Tab Pane Menu 1 -->
    <div id="menu1" class="container tab-pane active"><br>
     <p>Hello Description!</p>
    </div>
    <!-- End Tab Pane Menu 1 -->
    
    
    <!-- Start Tab Pane Menu 2 -->
    
    <div id="menu2" class="container tab-pane fade"><br>
     <p>Hello Product Reviews!</p>
    </div> <!-- End Second Container -->
    
    <!-- End Tab Pane Menu 2 -->
    
    <!-- Start Tab Pane Menu 3 -->
    
     <div id="menu3" class="container tab-pane fade"><br>
       <p>Hello Store Info!</p>
     </div> <!-- End Second Container -->
    
    <!-- End Tab Pane Menu 3 -->
    
     <!-- Start Tab Pane Menu 4 -->
    
     <div id="menu4" class="container tab-pane fade"><br>
       <p>Hello Store Reviews!</p>
     </div> <!-- End Second Container -->
    
     <!-- End Tab Pane Menu 4 -->
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 3

Привет Не добавляйте встроенные стили

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      <style>
         .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover {
         color: orange;
         }
         .nav-tabs>li>a {
         color:gray;
         }
      </style>
   </head>
   <body>
      <body>
         <div class="container">
         <!-- Nav tabs -->
         <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
               <a class="nav-link active" data-toggle="tab" href="#menu1">Description</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" data-toggle="tab" href="#menu2">Product Reviews</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" data-toggle="tab" href="#menu3">Specifications</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" data-toggle="tab" href="#menu4">Warranty</a>
            </li>
         </ul>
         <!-- Start Tab panes -->
         <div class="tab-content">
            <!-- Start Tab Pane Menu 1 -->
            <div id="menu1" class="container tab-pane active">
               <br>
               <p>Hello Description!</p>
            </div>
            <!-- End Tab Pane Menu 1 -->
            <!-- Start Tab Pane Menu 2 -->
            <div id="menu2" class="container tab-pane fade">
               <br>
               <p>Hello Product Reviews!</p>
            </div>
            <!-- End Second Container -->
            <!-- End Tab Pane Menu 2 -->
            <!-- Start Tab Pane Menu 3 -->
            <div id="menu3" class="container tab-pane fade" >
               <br>
               <p>Hello Store Info!</p>
            </div>
            <!-- End Second Container -->
            <!-- End Tab Pane Menu 3 -->
            <!-- Start Tab Pane Menu 4 -->
            <div id="menu4" class="container tab-pane fade">
               <br>
               <p>Hello Store Reviews!</p>
            </div>
            <!-- End Second Container -->
         </div>
   </body>
   </body>
</html>