Active tab in vertical tabs

HTML & CSS
1

Hi

I tried figuring out this
http://www.w3.org/Style/Examples/007/target.en.html#tab3
and apply it to this
ttri dot biz/test_sidebar

but while I got the “panes” to show based on the sidebar links I can’t get to have the active one with a different background color.

Appreciate your help.

Thank you

2

try

div.items p:target{
background-color:#000;
}
3

Thank you

I am sorry, I might not have been very clear, your suggestion is for the “pane” background that I have got to display following the w3 explanation, what I need is the tab (link) background color when its content is displayed, like the example at the end of w3’s page.

4

Ah, sorry. You can try add a class to the tab and use :target on that class. If this don’t work, a jq method would be simple.

 <a class="tab" href="#item1">item 1</a>
 <a class="tab" href="#item2">item 2</a>
 <a class="tab" href="#item3">item 3</a>


.tab:target{
background-color:#000;
}
5

Thank you.

It doesn’t work.
As you may see I have little knowledge, and struggling with css, hence jq which I am zero it’s a hard option.

6

The problem is that on the w3c page the tab links at the top of the content are contained within each target div. That means when the div is a target you can style the link because its a child of that target div.

In your example you have moved the side column links out of each block into their own block which means that there is no way to target the active item because the focus has moved to the target div which is somewhere else.

Either put each side link in each tab pane and then absolutely place it back where you want it or as mentioned above use JS/jquery to add a class to the currently clicked item.

7

If you are using Jquery (and it seems you are using bootstrap so you probably are) then you can add the class like this.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
	$(".fz-intro-link a").click(function() {
 	$(".fz-intro-link a").removeClass('currentLink');
	$(this).addClass('currentLink');
});
</script>

That will add a class to the item that was clicked and then you can style it as you like.

e.g.

.fz-intro-link a.currentLink{background-color:red}

You may have to check specificity if you have applied more weight to the original rule.

8

Thank you.
I kinda had the feeling that was the problem, and was hoping there would have been a solution, which from your explanation I see there is not.

I had gone googling for the js/jquery solution, while you kindly had posted this solution.

Indeed I had to check specificity to make it work, which is something I googled for to understand your comment.

Once again thank you very much for your patience, and kindness.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.