Different tab designs with a variety of color schemes

Question

Different tab designs with a variety of color schemes

I am looking to implement various color combinations for different tab selections using the background-color property.

For instance:

About: red .nav-tabs, dark red for .active,
Services: yellow .nav-tabs, dark yellow for .active,
....
....

and so forth.

What would be the most effective way to achieve this? I have come up with a plan:

Pre-define styles for background colors,
Retrieve the hash on the 'shown.bs.tab' event,
Pass it into a switch statement,
Apply css to .nav-tabs and .active.

Is there a better, more practical solution?

EDIT:

To clarify further, when I select the 'about' tab, the entire tab panel and other pills will turn red, with the active 'about' pill being dark red. If 'services' is selected, the tab panel and all pills will be yellow, with the active 'services' pill in dark yellow.

jquery css twitter-bootstrap-4

Answer 1

Answer №1

Hopefully, this solution will be beneficial for you. Feel free to insert more li items and assign appropriate classes based on your preferred colors.

$(function() {
  $('li:first').hover(function() {
    $(this).toggleClass('darkgreen');
    $('ul').find('li').not(this).toggleClass('green');
  })
  $('li:nth-of-type(2)').hover(function() {
    $(this).toggleClass('darkred');
    $('ul').find('li').not(this).toggleClass('red');
  })
})

ul li {
  list-style-type: none;
  width: 100px;
  padding: 20px;
  background-color: #444;
  color: #fff;
  text-transform: uppercase;
  transition:0.3s;
  cursor:pointer;
}

.green {
  background: lightgreen;
}

.darkgreen {
  background: darkgreen;
}

.darkred {
  background: darkred;
}

.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>about</li>
  <li>services</li>


</ul>

Answer 2

Hopefully, this solution will be beneficial for you. Feel free to insert more li items and assign appropriate classes based on your preferred colors.

$(function() {
  $('li:first').hover(function() {
    $(this).toggleClass('darkgreen');
    $('ul').find('li').not(this).toggleClass('green');
  })
  $('li:nth-of-type(2)').hover(function() {
    $(this).toggleClass('darkred');
    $('ul').find('li').not(this).toggleClass('red');
  })
})

ul li {
  list-style-type: none;
  width: 100px;
  padding: 20px;
  background-color: #444;
  color: #fff;
  text-transform: uppercase;
  transition:0.3s;
  cursor:pointer;
}

.green {
  background: lightgreen;
}

.darkgreen {
  background: darkgreen;
}

.darkred {
  background: darkred;
}

.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>about</li>
  <li>services</li>


</ul>

Answer 3

Answer №2

If you are in search of the

siblings()

method within jQuery, refer to https://api.jquery.com/siblings/

When assigning tabs classes that correspond to specific colors, consider utilizing this line as a model:

$(".active").css("color", "blue").siblings().css("color", "darkerblue");

Answer 4

If you are in search of the

siblings()

method within jQuery, refer to https://api.jquery.com/siblings/

When assigning tabs classes that correspond to specific colors, consider utilizing this line as a model:

$(".active").css("color", "blue").siblings().css("color", "darkerblue");

Different tab designs with a variety of color schemes

Answer №1

Answer №2

Similar questions

Unable to see the tokens on the connect four board when using Javascript and HTML

The jQuery gallery is experiencing some functionality issues

Icons will be displayed when hovered over

Can the placement and dimensions of the audio controls be customized?

Tips for dividing the WordPress header navigation horizontally using separate PHP files

What sets apart Firefox and Chrome when it comes to interpreting the widths of flex items?

The behavior of the input in React-bootstrap-daterangepicker is acting strangely

JS animation triumphant

Employing featherlightGallery.js without the need for anchor tags

At times, the CSS fails to load at first and does not refresh correctly when using F5 or CTRL F5, yet it occasionally loads when clicking on links

Enable search functionality for jQuery Select2 values that have been formatted by a formatter function

Handling a jQuery Ajax success callback when it fails

Ensure that an HTML table row remains fixed on the screen at all times

Center alignment within input-group-prepend using Bootstrap 4

jQuery concealing selections from dropdown menus

Can Antd's Typography.Paragraph be used as a multi-row Menu title?

The listbox is experiencing display issues when viewed in the Chrome browser

Incorporate CSS and JavaScript files into every page of NetSuite

Looking for assistance in personalizing a Tab slider plugin with jQuery and CSS?

Dealing with a JSON array in PHP that has been transferred through jQuery