Tips for customizing tab pane color using HTML/CSS

I am looking to customize the color scheme of my tab-pane.

My goal is to have each tab turn "orange" when clicked, while keeping the rest of the tabs in a "gray" color.

Below is the code I am currently experimenting with:

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

In the image below, I have selected the "Product Reviews" tab. However, the color does not change to "orange".

Additionally, after selecting the "Product Reviews" tab, the color of the "Description" tab remains "orange" instead of changing to "gray".

https://i.sstatic.net/qsmxR.png

What could be causing this issue?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Replace inline styles with the following code in a style tag:

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

This is how your updated code should look:

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

If you want to optimize your changes, consider the following adjustments.

HTML Modifications;

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

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

CSS modifications:

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

Check out the outcome of the above code here: 1

Answer №3

Greetings! Please refrain from including inline styles.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Sample Bootstrap Page</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>
      <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>Greetings from Description!</p>
            </div>
            <!-- End Tab Pane Menu 1 -->
            <!-- Start Tab Pane Menu 2 -->
            <div id="menu2" class="container tab-pane fade">
               <br>
               <p>Greetings from 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>Greetings from 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>Greetings from Store Reviews!</p>
            </div>
            <!-- End Second Container -->
         </div>
   </body>
   </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Confirm the email address using the autocomplete feature in the field

I'm currently utilizing Material UI to design an autocomplete field with multiple inputs that gives users the option to either choose from existing email addresses or input their own. An example of what I'm trying to achieve can be seen here: ht ...

javascripthtmlreactjsmaterial-ui

CSS styles are not getting rendered by Firefox when loading content using jQuery AJAX

My website allows users to comment on books and articles, with a search input to find relevant sources. Using jQuery, I dynamically load new sources from an outside site based on search terms and display them in a list using AJAX. However, I’m facing two ...

jquerycssajaxfirefox

Steps for removing all inline styles within an element:1. Access the element's

I have a group of span elements containing texts generated by tinymce. <span class="ArticleSummary"> This content is produced using a text editor and may include various inline styles. </span> Typically, this text includes numerous inline s ...

javascripthtmlcss

Tips for dynamically displaying images in both horizontal and vertical orientations

I would like to showcase images in the imageList. Here is what I want: AB CD How can this be achieved? It's not a matter of being even or odd Perhaps the list could look something like this: ABCDE FG I simply want a new row or display:block when ...

javascriptcssangularjshtml

What is the process for assigning default values to dynamically generated form elements?

I have been working on building a single-page application (SPA) using JavaScript and jQuery. During the process, I encountered an issue with a dynamic form. The user is able to add specific fields as needed, but if they don't generate and utilize all ...

javascriptjqueryhtml

The issue with the Bootstrap slider persists

The slider function in the downloaded html and css codes from bootstrap is not working properly. When clicking the arrow, the screen drops below instead of sliding. Even though the code was copied directly from bootstrap, the issue persists. <div c ...

htmlcssslider

Disabling the default validation message in HTML form inputs

Is there a way to change the default message that appears when submitting an empty HTML text input? I would like the box border to turn red instead. Can anyone help me achieve this? Below is the code for the text input box: <div class="input-group ...

javascripthtmlcss

What is the best way to achieve consistent column heights in Bootstrap?

I have encountered a similar issue with trying to make the columns in my Bootstrap layout equal in height. Despite searching for solutions on various platforms, including Google and Stack Overflow, I have been unable to resolve the issue. After exploring ...

bootstrap-4

Is it possible to use an input value to rotate an element?

I'm attempting to rotate a red circle with the ID of outer using Input[type=range]. I've tried selecting the circle's style, then transforming it based on the input value, but it needs to be within the parentheses of rotateZ(), which require ...

javascripthtmlcssdom

Ensure consistent element heights within adjacent columns using CSS

My template looks like this: https://i.sstatic.net/hoLzR.jpg I am trying to keep the same height between each item in both columns, where the height is determined by the tallest item in each column when they are placed side by side. But on smaller screen ...

htmlcssflexbox

CSS tip: Create a trendy design by adding a slanted border to the last

I need help creating a unique menu list with a white border design. The borders should all be straight by default, except for the last border which must be slanted. ul { background-color: #183650; } li { list-style: none; display: inline-block; b ...

javascripthtmlcsscss-transforms

Utilizing Material UI's React framework for maintaining uniform grid column heights

Take a look at the image provided for context. I am facing an issue with two div elements, where one should occupy 20% of the total browser height and the other should take up 80%. Currently, I am utilizing Material UI Grid for positioning, which looks lik ...

htmlcssmaterial-uigrid

Tips for showcasing the chosen menu item in the toggle button of the Bootstrap framework

I have created a collapsible menu that is hidden when the browser is resized and should be displayed when the button is toggled. Currently, I am using glyphicon-humberger in the toggle button. However, I would like to show the selected menu in the button ...

htmlcssbootstrap-4

What is the best way to predefine a value for a checkbox in Angular?

Here is the code snippet I am currently using: <input type="checkbox" [(ngModel)]="i.checkt" [ngModelOptions]= {standalone:true} (change)="recovery(i.checkt,i.TherapeuticArea)"> {{i.TherapeuticArea}} I have encountered an issue where setting stan ...

htmlangularcheckbox

Code that changes every occurrence of a particular filtered selection of HREF values to a different value

When faced with the limitation in Firefox where links cannot be opened in a new tab if they have a HREF tag diverting to a function, it might be necessary to utilize a script to convert them to an actual HREF. Understanding the functionality of foo: func ...

javascripthtmlhrefgreasemonkey

Here's a way to display 4 <li> elements in a single row and the remaining 4 <li> elements in another row

I'm struggling with a PHP query that retrieves multiple images from a database. My goal is to display 4 images on the first row, another 4 on the second row, and so forth. I initially thought I could achieve this using CSS, but unfortunately, I haven ...

phphtmlcss

Displaying or hiding table columns in Vue.js Element-UI el-table based on screen width: a step-by-step guide

Here is my code snippet for generating a table: <el-table :data="tableData" empty-text="No data to display :( " v-if="window.width > 855"> <el-table-column v-for="column in tableColumnsMd" :key=&q ...

htmlcssvue.jsvue-component

Material-UI organizes its Grid Items vertically, creating a column layout rather than a horizontal row

I'm struggling to create a grid with 3 items in each row, but my current grid layout only displays one item per row. Each grid item also contains an image. How can I modify the code to achieve a grid with 3 items in a row? Here's the code snippet ...

javascriptcssreactjsflexboxmaterial-ui

Is there a way to retrieve the href attribute from an <a> tag using PHP?

Similar Question: Retrieving the href attribute of an Anchor Element Provided hyperlink $link="<a href='test.php'>test</a>"; Is there a way to extract href and anchor text using PHP? ...

phphtml

Stop the div from overflowing

I am currently in the process of developing a unique horizontal animated page transition system which involves scaling the screen to fit the incoming page. However, I have encountered an issue where if the new page is smaller than the previous one, it caus ...

htmlcss