How to Create Switchable Tabs - HTML, CSS & JavaScript Tutorial
Вставка
- Опубліковано 12 вер 2024
- In this video we'll be looking at creating tabbed sections from scratch using pure HTML, CSS and JavaScript - it's super easy to do and doesn't require that much work.
Note that this doesn't require any sort of library such as jQuery or any other front-end JavaScript framework.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
Follow me on Twitter @dcode!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #webdev #javascript
This was the only video that actually taught how to form tabs AND display the contents of each tab only on click... and hallelujah! it actually works! Thank you soooo much for this video...you are a lifesaver. I would have been on the wrong side of my teacher had you not uploaded this video. Keep uploading more awesome videos and helping students like me : )
The idea is simple. The html and css parts are straightforward , The problem is in class naming ... he used the word tab everywhere .. It woould easier if he used something like : Tab , content , data--this-tab-for-content-number="1" . Also I think the document loading event is not necessary . This guy is highly skilled .
Great video! Really easy to follow along. I had the same issues as everyone else with the null and that back tick is what got me.
const tabToActivate = tabsContainer.querySelector(`.tabs__content[data-tab="${tabNumber}"]`);
May be useful to someone..
Thank you so much, you save my life 😭
You are amazing!!!
can't imagine how grateful i am for this tutorial , thank you sir
Thanks for the tutorial. I had problems with the "button.classList.add" and "tabToActivate.classList.add" lines of code towards the end. I ended up using "button.classList = "tabs__button tabs__button--active" for it to work but I don't kow why your code wasn't running. Thanks again.
I think may have same problem as you. so what did you change in the code?
love the tutorial it was very helpful. thanks man you get a sub today 👍
Thanks for mentioning BEM. didn't know that was a thing :)
Haha you're welcome, mate it's good - I always use it for all my projects
Awesome! You got a new subscriber :)
Good one mate.
Thanks so much, this video was a lifesaver
Thank you
Super video!! What vs code theme do you use?
This is AWESOME! Thank you so much!
great video mate
Thanks mate I appreciate it 😊
Hey! Nice vid, whats the font in vs code? Looks pretty good
Roboto Mono
thank youu, I should try it immediately!
Thanks, that was pretty useful information
Love u dude
✌
On the CSS part, only one of my sections are dissipearing, and not all of them. I did exactly what you did though
The video is very good, I just think you should have left
the code in the description so you don't have to write everything by hand jaja
I've gone through everything in the video and have it working but the buttons aren't working properly. The active button changes colour after becoming active, only after I click the button and then click elsewhere. It's like this for both Edge and Chrome at least. Any ideas why?
What theme and font do you use for VS code editor? It looks elegant.
1:15 if the css file is empty then why there is styling on the h1 tag??
Thanks
css end timestamps: 10:18
I really liked the video thank you .I have a little error tabscontainer in tabToAtctivate is indefined but i sure i a did the correct classe do you have anyidea why ? Thank you in adavance .
Which theme are you using in vscode?
love it.
Is it possible to activate the last selected tab, i mean if we save last tabNumber and activate it while reloading the page.
Is there any easy way to add a transition effect to this?
How can i submit a form inTab #2 and stay in Tab #2 after form is submited?
How can I implement an add tab or new tab button?
what's that font its awesome?
I love the idea of this but I can't make it work I've been proofing it for two days I found a couple of mistakes but they didn't fix it it doesn't work when I click on the tab I don't get any little green bar or bold text and I don't see the content I sure wish you'd post this codes that somebody could just download it.
same here...
Great video but for some reason this line does not work for me....tabToActivate.classList.add("tabs__content--active"); I get the following error message
:110 Uncaught TypeError: Cannot read properties of null (reading 'classList')
at HTMLButtonElement.
Does anyone know how to fix this?
how to make them auto switching
I need support for one activity, will you provide ?
can we replace "click" to "hover over" for change the tab?
There is an event call "mouseover". U can try it out
hi, my css3 and html is workout but javascript code is not working, pls help me?
this question is broad. You can check the bem class name
mine isnt working bro could you share a github link ?
❤️❤️
Can you create nested tabs with HTML, CSS and Js :D
Thank you
Everything works but the content. I'm having an error that states, "Cannot read property ' classList' of NULL. I see someone in the comments found their way around this but I don't know how they did it. Hopefully you are still able to respond to these comments. I appreciate your help and the training. It's very helpful. tabs__content has everything gone if I add tabs__content--active it appears but not on click.
Hey Joe, check the spelling in your query selector or get element by ID. Otherwise, if your script is in your head tag, move to the end of body.
@@dcode-software I actually ended up getting it to work. I don't remember how, but it's working. I believe I had an extra div tag somewhere. Thank you so much for your help.
what's your using font ?
Roboto Mono
the same but without attributes:
let tabsItem = document.querySelectorAll('.tabs-button');
let tabsBlock = document.querySelectorAll('.tabs-block');
for (let i = 0; i < tabsItem.length; i++) {
tabsItem[i].addEventListener('click', function () {
tabsItem.forEach(button => {
button.classList.remove('active');
});
tabsBlock.forEach(button => {
button.classList.remove('active');
});
tabsItem[i].classList.add('active');
tabsBlock[i].classList.add('active');
});
}
can you upload the code to github?
Can you please provide the source codes?
Source code please
when using this combined with a form, the page keeps reloading, anyone encountered such an issue?
Make sure you have your "type" attribute set to "button"
@@dcode-software got it, thanks a lot for the assistance!
My button can't click and change☹️
Plz tell me any solution for my problem??☹️
I just saw this vedio is 3 years old hope i get an answer
HI
No one use "master" for css.
whelp... i followed the tutorial as best as i could... and it still doesnt work... got damnit i miss my teacher... he died from covid while i was working on this...
dont work with django ...