Organic Tabs: Change class for active link

[mgk89]

Hello,

I’m using the https://css-tricks.com/organic-tabs/ tool which is very helpful.

So far i do have a question:

How would it be possible to change the background color for the current (clicked) <li> element, such as the ulelements do when clicked?

In fact there should be the class for the active link changed and after clicking on a new link the class should be removed and changed for the new link.

I hope my question is coherent :)

thank you very much for your help!

cheers
mgk89

[mgk89]

hi,

I would like to change the background color of the active li -Element.

Thank you

[mgk89]

Hmm, thank you for your answer.

Unfortunately both versions don’t work.

I’m not sure if ul.nav li a.current really refers to the active li – element.

I guess the solution would be probably the same as for the ul – elements: if an element is clicked, a certain class is assigned for the element that was clicked while all other elements change the class to the default one.

I think that was the solution for the ul – elements?

Thank you

[Paulie_D]

Switching classes is a JS/JQ function..and a pretty simple one at that.

If you post your code in a Codepen.io demo we can be more precise.

[mgk89]

hello,

thank you for your help!

I tried my best:

http://codepen.io/anon/pen/amDJI (sorry this is the first time I’m trying this)

on codepen the script does not work properly, on my website http://www.maxk.at/42 it works without any problems (except the missing change of color of the active link)

thank you

[mgk89]

I would like to have the active link (so after you click) to be coloured until a different link is clicked. Exactly the same it is with the categories on top.

[mgk89]

This is just perfect!!!!

Thank you very very much!

[mgk89]

Thank you, implementing the changes were no problem!

in fact I do have another question:

it would be great to have a function to hide the list-wrap DIV, to size down the navigation. It tried with another category as a link but the problem is that though I hide the list-wrap DIV the size of the example-one div (the whole navigation) stays the same.

would it be easy to create a category in the navigation bar to hide/unhide the list-wrap with resizing?

thank you for your help!

[Paulie_D]

It would be better is you started a new thread for this question as it’s not related to your original problem.

[mgk89]

wow, thank you very much for your quick help! I will try my best to improve it to a kind of “toggle button” that for hiding and showing and changing the name…

[mgk89]

hey,

maybe you would be so kind as to help me again :)

I tried to change “addClass” to “toggleClass” but that does not seem to work correctly, because the content of the last opened list disappears when clicking on a different ul – Element.

Do you think it is a lot of work to change the function of the minimise button to a kind of toggle-button?

thank you for your answer!

[mgk89]

thank you very much for your work.

Though it looks perfectly on codepen I could not get it to work correctly on my page. I tried copying the files twice, so I do not know what the reason could be.

Maybe you want to take a look at http://www.maxk.at/42

Thanks a lot!!!

[mgk89]

haha, very strange – i just reloaded it for the sixth time and suddely it worked.
shame on me!

thank you :)

[mgk89]

yeah, I guess this was the reason ;)

[mgk89]

just one las thing I noticed:

if you downsize the browsersize to mobile view you will notice that the distance between the two rows of categories disappears if you minimize the menu.

http://www.maxk.at/42

it just occurs when you minimize it with a very small browser width.

do you have any ideas what causes that?

[Author]

Posts