Tabbed Content / Posts /

How to make each tab a different background colour?

117
Question. I am also using your tabbed content code as well but I want to use a different color background for each tab?
When I try changing the color on the background portion

.tabs li a
{
    font: normal 12px Verdana;
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 15px 40px;
    border: 1px solid #CCC;
    border-bottom-color:#B7B7B7;
    color: #000;
    background: #505050 url(tabbg.gif) 0 0 repeat-x;
    border-radius: 25px 0px 25px 0px;
    outline:none;
}

where indicated..it hits all of the tabs.

Any tips?
Markus  12 years ago   viewed: 83889    

6 Answers

0

hi this will be not working i have solved the issue

sandy
  9 years ago
-1

Try using this code as an example and add some css.


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {font-family: Arial;}


/* Style the tab */

.tab {

  overflow: hidden;

  border: 1px solid #ccc;

  background-color: #f1f1f1;

}


/* Style the buttons inside the tab */

.tab button {

  background-color: inherit;

  float: left;

  border: none;

  outline: none;

  cursor: pointer;

  padding: 14px 16px;

  transition: 0.3s;

  font-size: 17px;

}


/* Change background color of buttons on hover */

.tab button:hover {

  background-color: #ddd;

}


/* Create an active/current tablink class */

.tab button.active {

  background-color: #ccc;

}


/* Style the tab content */

.tabcontent {

  display: none;

  padding: 6px 12px;

  border: 1px solid #ccc;

  border-top: none;

}

</style>

</head>

<body>


<h2>Tabs</h2>

<p>Click on the buttons inside the tabbed menu:</p>


<div class="tab">

  <button class="tablinks" onclick="openCity(event, 'London')">London</button>

  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>

  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>

</div>


<div id="London" class="tabcontent">

  <h3>London</h3>

  <p>London is the capital city of England.</p>

</div>


<div id="Paris" class="tabcontent">

  <h3>Paris</h3>

  <p>Paris is the capital of France.</p> 

</div>


<div id="Tokyo" class="tabcontent">

  <h3>Tokyo</h3>

  <p>Tokyo is the capital of Japan.</p>

</div>


<script>

function openCity(evt, cityName) {

  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");

  for (i = 0; i < tabcontent.length; i++) {

    tabcontent[i].style.display = "none";

  }

  tablinks = document.getElementsByClassName("tablinks");

  for (i = 0; i < tablinks.length; i++) {

    tablinks[i].className = tablinks[i].className.replace(" active", "");

  }

  document.getElementById(cityName).style.display = "block";

  evt.currentTarget.className += " active";

}

</script>

   

</body>

</html> 

WWWWWWWWWWWWWWW   one year ago
-2
Hi Markus,
Try the CSS:
.tabs li a:nth-child(2) {background-color:#FF0000;} .tabs li a:nth-child(3) {background-color:#336699;} ....

Above is not supported by IE 8 and earlier.

If you also want to support the IE 8 and earlier, you have to give each tab another class and define the background for each of those classes:

HTML:
<a href="#" rel="view1" class="tab1"> ...</a> <a href="#" rel="view1" class="tab2"> ...</a> <a href="#" rel="view1" class="tab3"> ...</a>
CSS:
.tabs li a.tab1 {background-color:#FF0000;} .tabs li a.tab2 {background-color:#FF0000;} ...

Please try if that helps.

john   12 years ago
-4
It works great!

Thanks so much!
Markus   12 years ago
-4
Hi im trying to also get the content box below to show the same colour as the tab.
So each tab shows a different colour and when you click it, the content background should match the tab.

But I cant get it to work, it shows multiple content boxes at the moment.
This is what ive done in the css, but it is obviously wrong, I need one box but with different background colours to match each tab.

div.tabcontents1
{
    border: 1px solid #B7B7B7; padding: 30px;
    background-color:#e3d0e6;
    border-radius: 0 3px 3px 3px;
}

     

div.tabcontents2
{
    border: 1px solid #B7B7B7; padding: 30px;
    background-color:#00adef;
    border-radius: 0 3px 3px 3px;
}

     

div.tabcontents3
{
    border: 1px solid #B7B7B7; padding: 30px;
    background-color:#8dc63b;
    border-radius: 0 3px 3px 3px;
}


How can I do this?
Joe   11 years ago
-3
Ive had a go at doing it another way, but it hasnt made any difference at all...:

Css :

/* Tab Content - menucool.com */

ul.tabs
{
    padding: 7px 0;
    font-size: 0;
    margin:0;
    list-style-type: none;
    text-align: left; /*set to left, center, or right to align the tabs as desired*/
}
        
ul.tabs li
{
    display: inline;
    margin: 0;
    margin-right:3px; /*distance between tabs*/
}
        
ul.tabs li a.tab1 
{
    font: normal 12px Verdana;
    text-decoration: none;
    position: relative;
    padding: 7px 16px;
    border: 1px solid #CCC;
    border-bottom-color:#B7B7B7;
    color: #000;
  /*  background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x; */
  background-color:#e3d0e6;
    border-radius: 3px 3px 0 0;
    outline:none;
}

ul.tabs li a.tab2 
{
    font: normal 12px Verdana;
    text-decoration: none;
    position: relative;
    padding: 7px 16px;
    border: 1px solid #CCC;
    border-bottom-color:#B7B7B7;
    color: #000;
  /*  background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x; */
  background-color:#00adef;
    border-radius: 3px 3px 0 0;
    outline:none;
}
   
   
ul.tabs li a.tab3 
{
    font: normal 12px Verdana;
    text-decoration: none;
    position: relative;
    padding: 7px 16px;
    border: 1px solid #CCC;
    border-bottom-color:#B7B7B7;
    color: #000;
  /*  background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x; */
  background-color:#8dc63b;
    border-radius: 3px 3px 0 0;
    outline:none;
}
       
ul.tabs li a:visited
{
    color: #000;
}
        
ul.tabs li a:hover
{
    border: 1px solid #B7B7B7;
    background:#F0F0F0 url(tabbg.gif) 0 -36px repeat-x;
}
        
ul.tabs li.selected a, ul.tabs li.selected a:hover
{
    position: relative;
    top: 0px;
    font-weight:bold;

    border: 1px solid #B7B7B7;
    border-bottom-color: white;
}
/* 
.tabs li a.tab1 {background-color:#e3d0e6;}       
.tabs li a.tab2 {background-color:#00adef;}
.tabs li a.tab3 {background-color:#8dc63b;}
  */
        
ul.tabs li.selected a:hover
{
    text-decoration: none;
}
     
div.tabcontainer
{
    border: 1px solid #B7B7B7; padding: 30px;
    border-radius: 0 3px 3px 3px;
}

div.tabcontents1
{
    border: 1px solid #B7B7B7; padding: 30px;
  /*  background-color:#e3d0e6; */
    border-radius: 0 3px 3px 3px;
}


#sub1{ background: #e3d0e6; }
#sub2{ background: #00adef; }
#sub3{ background: #8dc63b; }     




HTML:
<div style="width: 1000px; margin:0 auto; padding: 0px 0 0px;">
        <ul class="tabs" data-persist="true">
            <li><a href="#view1" class="tab1"><b>tab 1</b></a></li>
            <li><a href="#view2" class="tab2"><b>tab 2</b></a></li>
            <li><a href="#view3" class="tab3"><b>tab 3</b></a></li>
        </ul>
        <div class="tabcontents1" id="sub1">
          <div id="view1">
                <p>
                tab 1 text
		    </p>
          </div>
        </div>
      <div class="tabcontents1" id="sub2">
            <div id="view2">
                <p>
                tab 2 text
			  </P>
            </div>
      </div>
        <div class="tabcontents1" id="sub3">
            <div id="view3">
                <p>
                tab 3 text
			  </p>
            </div>
        </div>
    </div>

It is displaying the tabs at the top the right colours, and below it shows 3 content boxes overlapping one above the other.
Any ideas on how I can get this to layout properly and show a single contents box and change the tabcontents background colour to match the tab background colour please?
Joe   11 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲