Hello,
I’m using the tabbed menu at:
I want to make each tab at the very top (i.e. Features, How to Use, and Source Code) a different background colour when it is selected. Right now the background colour is white when it is selected.
The source code is at:
http://www.menucool.com/tab-content/template1/tabcontent.css
Any help is appreciated.
In the CSS look for this:
ul.tabs li.selected a, ul.tabs li.selected a:hover
{
position: relative;
top: 0px;
font-weight:bold;
background: white; /* CHANGE THE COLOUR HERE */
border: 1px solid #B7B7B7;
border-bottom-color: white;
}
That will change it for every tab but I would like to apply custom styling to each one.
Hi,
You will need to add an id to each tab to identify it (unless only modern browsers support is required and then you could use :nth-child).
e.g.
<ul data-persist="true" class="tabs">
<li id="tab1" class="selected"><a href="#Div1"><span>Features</span></a></li>
<li id="tab2" class=""><a href="#Div2"><span>How to Use</span></a></li>
<li id="tab3" class=""><a href="#Div3"><span>Source Code</span></a></li>
</ul>
Ids have been added to each list item and then you can colour the tab when it is selected like so.
ul.tabs li#tab1.selected a, ul.tabs li#tab1.selected a:hover {
background: red;
border: 1px solid #B7B7B7;
border-bottom-color: red;
}
ul.tabs li#tab2.selected a, ul#tabs li.tab2.selected a:hover {
background:blue;
border: 1px solid #B7B7B7;
border-bottom-color: blue;
}
ul.tabs li#tab3.selected a, ul#tabs li.tab3.selected a:hover {
background:yellow;
border: 1px solid #B7B7B7;
border-bottom-color: yellow;
}
The above is additional code and not a replacement.
The problem is that the tab will now be a different colour to the pane itself and the ‘tab effect’ will be lost a little. If you wanted to colour the pane as well then you would need to use some js to add a class depending on which tab was clicked.
Hi Paul,
Thanks for providing guidance on this. I tested the code above, and while it makes the first tab red in color, it breaks the functionality of the tabs.
Yes that’s what I said 
… and that was what you asked for
Please re-state your requirements if none of the above matches your criteria. If you want help implementing the JS then please post your own html and css and then I will move the thread to the JS forum.
This is what I want but for each tab. Please move to JS forum since it is more appropriate.
Hi,
If you want the tab panes coloured as well as the tabs then it can be done in CSS but you need to remove the styling from the tab contents container itself and style each tab pane itself (note that generally when you say tab that refers to the little tab at the top and not the tab panel itself).
Here is a quick codepen.
Thanks Paul -that looks great!
The only thing is I need the information to be accessible when JS is disabled, which is why I was using the free source code from the web site above. I also don’t need the color of the content area to change, only the color of the tabs.
It would be a plus if we could change the border color surrounding the tabs (and the border color surrounding the content area of each tab) to match the color of the tab that is selected.
The code I used is from the web site you linked to. I didn’t change the JS only the CSS so if js is disabled then all three tab panes will show. There was no change to the function of that menu.
I also don’t need the color of the content area to change, only the color of the tabs.
Now you really are confusing me lol
The CSS I gave in my first post changed the colour of the top tabs only but you alluded to the fact that you wanted the tab pane changed also.i.e. you said this :
it breaks the functionality of the tabs.
I assumed you were referring to the tab pane not being coloured because there was no other change to the functionality of the tabs. They wil work exactly as per the original but just a different colour.
It would be a plus if we could change the border color surrounding the tabs (and the border color surrounding the content area of each tab) to match the color of the tab that is selected.
You can do that with the code I have just given you. Just change the border colour on the new rules I added. I commented the section of code I changed.
I still think it will look odd if you change the colour of the tab at the top but not the content pane.
This is working well… thanks again for the help. I played around with the source code a bit and modified some things.
The reason I thought the functionality was broken before is because I didn’t realize it was in an iframe. I viewed the page, turned JS off, and some of the content disappeared.
Hey again,
For the css, what would be the optimal code to position:
Tab 1 at the very left (already does this by default)
Tab 2 in the middle
Tab 3 at the very right
Thanks
Hi,
It depends on whether you want a quick fix or something exact.
You could just float the third tab to the right and then give the second tab a left margin.
#tab3 {float:right;}
#tab2 {margin-left:100px}
Or you could do something like this:
ul.tabs{text-align:center}
#tab1{float:left}
#tab2 {display:inline-block;float:none;*display:inline;*zoom:1.0}
#tab3 {float:right}
I tried those examples but they mess up the formatting for some reason. Are you able to apply it to your Codepen example?
Sure. Updated here.
You may need to refresh as codepen sometimes caches.
I added this:
ul.tabs{text-align:center}
#tab1{float:left}
#tab2 {display:inline-block;float:none;*display:inline;*zoom:1.0}
#tab3 {float:right;margin-right:0}
Thanks! I appreciate it.
When I use precisely the same source code on my server, Tab #3 appears out of place in Internet Explorer. But it appears fine when viewing it @ CodePen.
Which version of IE?
Do you have a link to the page and I’ll take a look?
I’ve just uploaded a version and it works back to IE8 with no problems.
If you want to support IE7 and under you will need to change the order of the tabs so that tab3 is second in the html as shown in this example.