-1

I want to use different color combinations of background-color on different tabs selection.

For example:

  • about: red .nav-tabs, dark red for .active,
  • services: yellow .nav-tabs, dark yellow for .active,
  • ....
  • ....

and so on.

So what would be the best practice to achive this? I have a plan:

  1. Pre-define styles for background colors,
  2. Get the hash on 'shown.bs.tab' event,
  3. Pass it into a switch statement,
  4. Set .nav-tabsand .active css.

Any better, a more practical idea?

EDIT:

To be more clear, what I am expecting is if I select about tab, the whole tab panel and other pills will be red and active about pill will be dark red. If I select services, tab panel and all pills will be yellow and active services pill will be dark yellow.

Litestone
  • 529
  • 7
  • 22

2 Answers2

0

Hope this helps you.You can add more li elements and add classes according to the color you want.

$(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>
Hemant
  • 1,961
  • 2
  • 17
  • 27
0

You are looking for the

siblings()

function in jQuery https://api.jquery.com/siblings/

Give you tabs classes that represent the color. You can take the next line as an example.

$(".active").css("color", "blue").siblings().css("color", "darkerblue");
beorn
  • 35
  • 2
  • 10