Add Remove Active Class On Click - Html CSS and Javascript

Also Watch This : Add Remove Active Class Based On URL Using Javascript only
Video Url : • Add Remove Active Clas...
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
------------------
Join Our Channel Membership And Get Source Code Everyday
Join : / @onlinetutorialsyt
------------------
Please LIKE our Facebook page for daily updates...
/ online-tutorial-html-c...

[@OnlineTutorialsYT]

Watch This : Add Remove Active Class Based On URL Using Javascript only Video Url : kzbin.info/www/bejne/eHqWnIGpideojdE

[@adolfomartin5456]

I think you should have made this with "pure JavaScript", with querySelectorAll. And to code toggle classes there is a method that I cannot remember right now.

[@aweaweee430]

Thx for reduce my headache

[@shubhampodhade7653]

Thank you for informative. Non copied video. Useful.

[@malamehta6991]

Thank you for this video ..it's really help me for solving my issue ☺️☺️

[@kriziacarissepangan1590]

Woaah! Thanks for this! God bless!

[@aburayhan6149]

this video is really great.... it's help me ...thank you so much bro🥰🥰

[@MohitKumar-jg4ry]

Thanks a lot, it helps me more. I use many methods, and in the end, this helps me! thanks again👍

[@frogsama666]

I think i'm starting to have feelings for you

[@emirbyte]

Wtf

[@bo_ver4628]

Your tutorials is great! But it will be much amazing if you use pure vanilla javascript)

[@anselminos5238]

i want vanilla because i wanna learn vanilla js

[@blakereeves3900]

Just use DOM manipulation instead of jQuery. It will look very similar.

[@anselminos5238]

@@blakereeves3900 yeah its something like document.getElementById("Element").classList.add/remove("Class")

[@OnlineTutorialsYT]

Watch This : Add Remove Active Class Based On URL Using Javascript only Video Url : kzbin.info/www/bejne/eHqWnIGpideojdE

[@meezanmallick5908]

That background music and simple code made me stress-free

[@sorbangsorrysorrybangbang7388]

Thank you so much sir

[@VivekKumar-bc4mj]

This is tutorial video is so helpful ❤️❤️

[@ziauddinbablu1814]

Thanks. it was very helpful for me.

[@manuelsuarezabascal75]

First liked the video and then watch it! Excellent as usual!

[@sayonjana]

great one sir

[@bhaveshasnotkar5210]

Video is upto the point.. Wonderful liked it

[@ardeleangavril-liviu3549]

It works only because you didn't added href If you do add a link to another page it will reload the script and the Home page will still have the class active. I even tried to make the navbar in a separate folder and add it to each page with php code "require" and I still get same result. Am I doing something wrong?

[@tiagofilipe1308]

did you manage to solve?

[@ManishSharma-zd3iq]

great man , thanks

[@danutzz8]

cheers m8--- great video and works perfect! I was only after the removal of the active state from siblings ;)

[@abbasawa372]

Thankyou for saving my time buddy (y)

[@bhupengadtia]

First to view first to comment.. Thanks for the tutorial

[@gauravbadgujar5555]

Thank you Sirji. It's a nice video. It helps me a lot. Thanks :)

[@separatetraveler8226]

Excellent . by the way ..Thanks.

[@quynhphan4402]

Thanks for your video.

[@roti1873]

5:41 bookmark - full code

[@zafarasrorov3687]

thanks man

[@maheranam318]

Wow his intro is literally the background score from "The Social Network"

[@mehedihasannabil6485]

thanks man, it's working.

[@MrWebDesignerAnas]

I want this in vanilla javascript please

[@raedkais4891]

Than you!

[@gxguy2906]

Will this work during page reload?

[@muhammadsofyansyah9571]

not working

[@syedashahjaffery7044]

great tutorial

[@syedashahjaffery7044]

thank you sir

[@user-qo6vg5jb6y]

Last Part not working->where you are adding siblings().removeClass('')😞

[@infernal95mailru]

Thanks!!

[@Jake-im8eq]

For some reason the JS code doesnt change the active class for me. Do you know why?

[@iindgren]

same here, did you solve it?

[@hirenajudiya2923]

thanks.......bro

[@hasanmashriqi7997]

thanks a lot. nice

[@ranjankaw3414]

when we put the href attribute values like some website link this active class will not work. It will initially highlight the anchor link and then the active css will go away when page is redirected. Any idea how to solve this problem ?

[@OnlineTutorialsYT]

Solution : kzbin.info/www/bejne/eHqWnIGpideojdE

[@prasantasaha7556]

You could use the flexbox to align everything.

[@create4makingplaylist280]

nice! thank you

[@tuannguyen-xd1yg]

thank you

[@VishalSoni-pn5mk]

thanks

[@techshab9060]

Superb sir

[@crocronson7908]

what is this awesome music?

[@3APPutil]

Mt gostoso ver esse video com essa musica

[@EscOfficial]

THANK YOUUUUU

[@akremhammami5328]

is there pure javascript alternative solution ?

[@OnlineTutorialsYT]

Watch This : Add Remove Active Class Based On URL Using Javascript only Video Url : kzbin.info/www/bejne/eHqWnIGpideojdE

[@anuragsrivastava6598]

Can you provide with the code?

[@syediqbalahmed3176]

thanks...

[@zholy9]

Just asking ... but is it possible that this isn't the "universal" way of how to add/remove class via JS? With the use of "siblings" - I think it's only limited to the "same elements" (in this case "ul li"). But would this work on just "divs, img" as well ? Again, just asking, as I'm rubbish in JS.

[@OnlineTutorialsYT]

Watch This : Add Remove Active Class Based On URL Using Javascript only Video Url : kzbin.info/www/bejne/eHqWnIGpideojdE

[@iamgod3724]

Javascript or jQuery ??

[@janaojana1686]

it doesn't work. why?

[@osmanylmaz9535]

Thank you

[@bhupendrashekhawat9185]

why dont you use toggle ?..

[@wednesday6301]

this jQuery sir, i need pure js.

[@OnlineTutorialsYT]

Watch This : Add Remove Active Class Based On URL Using Javascript only Video Url : kzbin.info/www/bejne/eHqWnIGpideojdE

[@alyssajorgensen3279]

@@OnlineTutorialsYT Thank you very much for that link

how do you fetch wich one is active?

[@pranavanand2281]

haunted background music

[@businesssocho2246]

How to add a class on dynamically created element

[@tarashrunyk9491]

Hi, can you tell me for what you add position: relative to “a” element ?

[@corsiniRicardo]

instead of 'ul li' you put 'ul li a'

[@prasantasaha7556]

Listen relative is a way of positioning an element. Relative to its previous position. But absolute is quite different. ITS POSITIONED RELATIVE TO ITS DIRECT PARENT.

[@tommyzDad]

I was hoping for a pure/ vanilla javascript solution.

[@OnlineTutorialsYT]

Watch This : Add Remove Active Class Based On URL Using Javascript only Video Url : kzbin.info/www/bejne/eHqWnIGpideojdE

[@amitsinghrajput7057]

Bro home page pe slider ki jgah pe 3 short videos ko ek saath kaise lgaynge iska video bnao

[@laibaiqbal3784]

why people do not add source code :/

[@monozoid]

why i cant change color

[@jonayethossain6672]

nice

[@Deeepakk_kumar]

Sir i need your help on responsive navigation bar please help me

[@helmas_witch]

Why it doesn't work? X((

[@codeek0]

OM!

[@serenamatla5712]

it's not working

[@mayursaroj4360]

make a video on effect where when you click an unactive element the background from active element slides to the clicked element....i dont know what its called... please reply

[@OnlineTutorialsYT]

Watch This : Add Remove Active Class Based On URL Using Javascript only Video Url : kzbin.info/www/bejne/eHqWnIGpideojdE

[@mohammadzakirhossain2428]

you just show how to do anything by using js but you don't show that why?

[@guilhermealexander4855]

teach to do with Javascript

[@chinmoymandal9669]

Sir I have faced some problem while using this code...whenever I navigate to another link it will not work....so please do something...

[@ZenelJashari]

same here, if you don't assign a page but only with hashtag (#) it works. Once you assign a page like "contat.aspx" it wont work

[@OnlineTutorialsYT]

Watch This : Add Remove Active Class Based On URL Using Javascript only Video Url : kzbin.info/www/bejne/eHqWnIGpideojdE

[@arslmirza8642]

site py nahi chalti jab page reload hota hai

[@OnlineTutorialsYT]

kzbin.info/www/bejne/eHqWnIGpideojdE

[@ronqs]

How do you do this with css only?

[@tronicuganda1560]

Man. If u redirects to page it won't work 🙄

[@OnlineTutorialsYT]

try this : kzbin.info/www/bejne/eHqWnIGpideojdE

[@SAGskills]

ho w r u my page going refresh after click on menu li where is the problem?

[@hinajain8529]

Hey did you find the solution to this problem? I am facing the same problem

[@OnlineTutorialsYT]

Yes...please watch this kzbin.info/www/bejne/eHqWnIGpideojdE

[@junaeidahmed6344]

Javascript title dikha kar jquery dekha rahe ho wah

[@almostworthy2973]

so jquery and JS are brothers??

[@OnlineTutorialsYT]

Watch This : Add Remove Active Class Based On URL Using Javascript only Video Url : kzbin.info/www/bejne/eHqWnIGpideojdE

[@santacroce2489]

song?

[@yeasinjabed3630]

Plz help me , How can i addclass with page load

[@OnlineTutorialsYT]

Watch This : Add Remove Active Class Based On URL Using Javascript only Video Url : kzbin.info/www/bejne/eHqWnIGpideojdE

[@corsiniRicardo]

siblings().removeClass() is not doing his job

[@darkrems3872]

not working

[@OnlineTutorialsYT]

Watch This : Add Remove Active Class Based On URL Using Javascript only Video Url : kzbin.info/www/bejne/eHqWnIGpideojdE

[@muneebgamer6351]

code?

[@OnlineTutorialsYT]

Watch This : Add Remove Active Class Based On URL Using Javascript only Video Url : kzbin.info/www/bejne/eHqWnIGpideojdE

[@periksi]

Nome da música?

[@game_developer_7382]

Skylike - Dawn

[@periksi]

@@game_developer_7382 valeui

[@game_developer_7382]

@@periksi I didn't understand you

[@periksi]

@@game_developer_7382 thank you

[@periksi]

@@game_developer_7382 valeu/obrigado is thank you in portuguesh

[@CodeSplash]

Vanilla Javascript Way -------> const li = document.querySelectorAll( 'li' ); li.forEach( currLi => { currLi.addEventListener( 'click' , (e) => { e.target.parentElement.querySelector( '.active' ).classList.remove( 'active' ); e.target.classList.add( 'active' ); }); });

[@himalayagupta7744]

Thank you so much

[@dineshasekar6918]

Thanks Bro.