Home › Forums › JavaScript › Organic Tabs: Change class for active link
- This topic is empty.
-
AuthorPosts
-
July 27, 2014 at 9:04 am #176600
mgk89
ParticipantHello,
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 theul
elements 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
mgk89July 27, 2014 at 9:56 am #176604mgk89
Participanthi,
I would like to change the background color of the active li -Element.
Thank you
July 27, 2014 at 10:28 am #176608mgk89
ParticipantHmm, 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
July 27, 2014 at 12:50 pm #176618Paulie_D
MemberSwitching 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.
July 27, 2014 at 1:42 pm #176619mgk89
Participanthello,
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
July 27, 2014 at 1:54 pm #176621mgk89
ParticipantI 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.
July 27, 2014 at 2:23 pm #176623mgk89
ParticipantThis is just perfect!!!!
Thank you very very much!
July 29, 2014 at 8:58 am #176800mgk89
ParticipantThank 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!
July 29, 2014 at 9:21 am #176803Paulie_D
MemberIt would be better is you started a new thread for this question as it’s not related to your original problem.
July 30, 2014 at 7:48 am #176931mgk89
Participantwow, 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…
July 30, 2014 at 10:35 am #176957mgk89
Participanthey,
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!
July 30, 2014 at 1:42 pm #176993mgk89
Participantthank 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!!!
July 30, 2014 at 2:06 pm #176999mgk89
Participanthaha, very strange – i just reloaded it for the sixth time and suddely it worked.
shame on me!thank you :)
July 30, 2014 at 2:10 pm #177003mgk89
Participantyeah, I guess this was the reason ;)
July 30, 2014 at 2:20 pm #177009mgk89
Participantjust 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.
it just occurs when you minimize it with a very small browser width.
do you have any ideas what causes that?
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.