CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Sarah
Sarah

Reputation: 39

how to change tab pane color in html/css?

I want to change the default colour (blue) of tab-pane.

I want when a user clicks on any tab it will become "orange" and rest of the tab colour will remain "gray".

I am trying the below code:

<!-- 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 -->

I have clicked "product reviews" tab in image below. But the color remains "gray" instead of "orange"

After I clicked "product reviews" tab the color of the "description" tab has not changed to "gray" and it is still showing "orange"

enter image description here

what am I doing wrong?

Upvotes: 0

Views: 10755

Answers (3)

Atousa Darabi
Atousa Darabi

Reputation: 927

Remove your inline styles and just add this in style tag:

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

Your new code would be like this:

.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>

Upvotes: 1

Sugumar K
Sugumar K

Reputation: 204

Hi Don't add inline styles 

<!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>

Upvotes: 0

Ashish Patidar
Ashish Patidar

Reputation: 41

You can refactor your changes like below. It would help you.

Html Changes;

<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 Changes;

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

CSS changes:

#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;
}

Below is the result for above code;

enter image description here]1

Upvotes: 0

Related Questions