Build Tabs Using HTML/CSS In Only 12 Minutes
Вставка
- Опубліковано 26 сер 2024
- 🚨 IMPORTANT:
Learn CSS Today Course: courses.webdev...
Tabs are one of the most common forms of navigation on a website, but they can be tricky to implement correctly. In this video I will show you exactly how to create tabs using HTML, CSS, and JavaScript as quickly as possible. We will cover how to switch tabs when clicked, how to indicate which tab is selected and much more. I will also be explaining every line of code as I write it so you can see exactly why everything works.
📚 Materials/References:
GitHub Code: github.com/Web...
CodePen Code: codepen.io/Web...
🧠 Concepts Covered:
- How to create tabs in HTML/CSS/JS
- How to hide/show elements on click
- How to move classes between elements
- Using data attributes to dynamically select elements
🌎 Find Me Here:
My Website: webdevsimplifi...
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#HTMLTabs #WDS #CSSTabs
I love these short tutorials on specific tasks - it's a great way to learn.
i agree also how has your progress been ?
a few years ago I wanted something like this so bad, but had no idea how to do that on wordpress. It's actually pretty easy if you can code. :) Coding is truly empowering!
Coding really is great. It gives you super powers to create anything you can think of.
@@WebDevSimplified truth spoken
@@WebDevSimplified Very True
This was very well explained, thank you.
Few things for feedback:
Could've used *{} for the padding and margin that needed to be removed, it might have made more sense to do it the way you did though.
Not everyone is so familiar with arrow functions, that's only part of this that I got confused as I don't use.
Wow, any request I make while studying web dev, this channel has an answer, amazing👏
i did it on my own way and i am happy.It is around 10 week i started work on java script Your videos helps me so much
At 6:37 my code is not running although I have copied exactly the same thing u have written sir. Please help you are really incredible!
It is the same for me
You should explain it slower, for people trying to follow along it's difficult to understand what you're doing when you're basically talking like you're reviewing for yourself instead of teaching.
Superb tutorial very helpful indeed
Thank you!
Very Well Explained every things one by big support dear!
I’m not really understanding the JavaScript part of this. Do you by any chance know any good beginner resources for that?
This guy is a robot, he does not blink
Very good explaination 👍
Again, thank you, Kyle.
you're a legend thank you
Thank you... Even I don't know yet any of Js I could make it work. Great job
you can also check this awesome animated tabs ua-cam.com/video/d9MW5nPIgSk/v-deo.html
Thanks so much! I made them look way cooler!
Thanks a lot, bro!
0:34 "…which when we highlight over them, it's just going to hover a little colour" 😃I have e friend who sometimes inverts words like that
Great video kyle!
Thanks!
Thank you. I need this in my project.
Dude, you are amazingly helpful. Thank you.
Thank you so much for this! It works perfectly!
Great place to start. Thanks!
I totally forgot about data attributes. Thanks for reminding me ;-)
Really clear and great tutorial, thanks a lot!
Thank you, you saved my life...the code work perfect
amazing content as usual.... just missed one little thing... a hash on url... so I could send to someone the right place instead to say to her where to click ... what you think? =)
That is a great point. This would be a good thing to add on yourself since it isn't too difficult, but does test quite a lot of JavaScript skills.
Tell me what u found out then
Do you have an example of this somewhere? I’ve been looking and cannot find this and am looking for this exact functionality so that if I share a link with someone it will open the correct tab. Thank you in advance!
Very well done.
Thanks!
You're welcome!
Very nice videos. I just stumbled recently across them
thx kayl, easy and fast!
Hello Sir your tutorial is really wonderful. If I want to add another layer of tabs say inside each of the home, pricing or about how do I tweak the code to achieve that. For example in Pricing I would like to add a product category list and each list having certain products. Is it achieved by nesting further loops?
Same question here
from what i understand, i think you can somehow try to figure out a way to maybe remove the other target tabs? when you click on pricing. Then after clicking on pricing you set the other tabs you want on the pricing tabs, visible. these are just my fundamentals, not exactly sure how to code it Lol. give it a try though, same for me
Thank You Very Much for Sharing!!! Very Much Appreciated!!! :) 🙏 🙏 🙏 🙏 🙏
great tutorial, thank you
you can also check this awesome animated tabs ua-cam.com/video/d9MW5nPIgSk/v-deo.html
Pls do it , step by step
You are awesome. The way you type i wish i can do it too.
You can. It just takes practice.
I will follow it
I can't change a tab. I'm only looking at the home tab content.
Pls help!!!
if u need help, use the github code, is in the descripiton
gracias por el video. Eres lo mejor. Cuídate mucho
Excelente, aprendi bastante... Thanks.
you can also check this awesome animated tabs ua-cam.com/video/d9MW5nPIgSk/v-deo.html
thanks
thanks, wonderfull tuto
THANK YOU SO MUCH! IM DEFINITELY SUBSCRIBING!😊
thank you senior,
Thankyou Kyle thumbs up
this is awesome. Thank you !
you can also check this awesome animated tabs ua-cam.com/video/d9MW5nPIgSk/v-deo.html
Build Tabs Using HTML/CSS In Only 12 Minutes. Me when the: JS
Can someone please explain me this line
const target = document.querySelector(tab.dataset.tabTarget)
he said that tabTarget will target your HTML I am not able to understand what is the use of dataset and tabTarget else the whole code is clear
hi i tried adding more than 3 tabs but the other tabs dont show any content ihave placed
Any thoughts on having these tabs automatically loop with varied timer like a carousal and also clickable at same time. How could it be made to show automatically? Please help Kyle or anyone else who is reading this comment. Thanks
i want to have multiple of these tab sections on one page, but when i just copy and paste the code, it gets messed up. How do i fix this?
Um, it's not working. 🤔
just use the github code, is in description
What is th different between: .class[data-attribute] and [data-attribute].class
How can I make this work when nesting the tabs? I tried changing data-tab-target to idata-tab-target and it would work. apparently, I cannot change data-tab-target. If I do the querySelector returns null. Please help.
Having some trouble with the tab content not appearing on any of the tabs apart from the first one. Any idea what could be wrong?
hey how do you style each data-tab-content individually thanks for your help
Thanks a lot for this great tutorial, actually I have one problem, I followed all the steps shown in this video, but when I click the tab, the content will appear once and immediately will disappear. I check the debugging in console and found the active class is added but then it is removed. I do not know what is causing this problem. Any Idea?
Thanks in advance
Is it possible to add a transition between the text changes?
pls chage heading of your video. You use html/css/js
could you help me a little bit, at 3:58 for the query selection, you use a square bracket in the code line ("[data-tab-target]"), why is this done I cant find any answers online
does is automatically update? i have everything typed in as you and the website wont load
Omg thank you !!!
Only think I’m blanking on is at 4:34, What is the tab.dataset.tabTarget? Why was it written like that? 🤔
Did you got the answer ? I asked the same doubt you can check the recent comment
I did the same you did. The console be telling that tabs.forEach is not a function. Did I go wrong with something?
One question like how to use pictures as tabs?
Amazing
Thank you so much
you can also check this awesome animated tabs ua-cam.com/video/d9MW5nPIgSk/v-deo.html
Make a poll with realtime pie chart result same webpage using html css javascript
Hello, I am trying to create my first ever test website. Generally is it good practise to have all tab content information in the one HTML file and use data attributes (like in this video) to show the content you want to see, based on the tab you have clicked on, or is it best to have separate HTML files for the separate tab page content and use a refs to select them? Sorry if its a daft question but I have seen it done both ways, and don't know the benefits of either yet.
It depends. If you have a small amount of highly related content then tabs are a good idea, but it is more complex to create so if you have lots of differing content such as an about and home page then doing separate HTML pages is probably best.
@@WebDevSimplified thank you Kyle :) i will go with separate HTML pages for now, just so its less on one page for me to look at whilst i'm still getting use to everything. Been working on this nearly an hour and only just finished my nav bar!
@@C_Ariss Separate pages is almost always the right answer so that is a good choice.
Hey Hey. I have a question. I already build a base of the website and wanted to implement this into it. But i have no idea how i could get the base that i already had into the Home tab? do you have a video for that or a short Turtorial?
Nevermind i fixed it
I have done this in Vs Code, but could not get it to work. So I tried to debug the code in VS code and could not get that to work. Is it possible to debug this lesson in Vs code, and if so, what are the appropriate extensions and settings (especially for json if any). thanks
hello, i have written all of my css and javascript code but I,m not able to click on any tabs. I have done everything you showed in the video step by step, but I'm still not able to click on stuff. Any help from you OR the community would be very much appreciated.(If this video is still relevant) Thanks for the video btw.(the code is not working here 6:37)
Same issue
i was able to fix the issue while watching your "how to create responsive navbar" video. thanks @ Web Dev Simplified
hi! how we can change the color of tabs?
For exaple:
first-tab->bacground: red ,
and second-tab->background: green.
If tab is active it should be different background color
You just need to use CSS to do that. You can apply a background-color to them and use classes to add different styles to different tabs.
I'm trying to implement this in Angular 12. Is there a way to use the tab.dataset.tabTarget in Angular? I keep getting property dataset does not exist on type Element.
I need this with CSS / HTML only for sites who block Script
why do i need to use the data tab why just using css to do all stuff ?
Yes html and css only + javascript
i did everything like in the video but i can not select between tabs. can somebody say why?
Awesomee
I thought we were not supposed to use the H1 to stylize multiple items?
Hi, question. Is there a way to have tabs influence stuff outside of them somehow? Like, for example, changing the background color of a div that exists outside of the tabs depending on which tab is open?
saving this
Did everything you did and still didn't achieve my goal. The pricing and about tab doesn't click and only the home tab shows.
Thank you
you can also check this awesome animated tabs ua-cam.com/video/d9MW5nPIgSk/v-deo.html
why isnt JS in the Titel
that was perfect
Make a video on HTML 6 and CSS 4.
what is tab.dataset.tabTarget???
can I used this in forumfree?
when I try to replace [data-tab-content] using class it doesn't work but why?
anyone?
just a quick question why is the # needed for the data attribute names
id
Awesome, I was actually really looking for 1 of those. I didnțt really get the tab.dataset.tabTarget, especially the tabTarget. Will you do a carousel tutorial? Like the bootstrap one? There is no tutorial for that. I built one but I canțt make it start over and move on a set time.
The idea of a carousel is on my list of ideas but it is pretty low right now.
node.dataset is built in property for each DOM node. It is an object containing every attribute that begins with data- of an actual hard-coded DOM element in camelCase. For example will have property div.dataset.lolLol
@@maksymantoshkin2896 ooo so the data-tab-target turn into tabTarget?
@@charlesxavier77 Yes, indeed!
@@maksymantoshkin2896 ty
What are the odds you have this written out somewhere that I can just copy-paste because I have to be fucking up somewhere. As soon as I get to the display: block; part it stops working for me
wonderful
8:27
how do i use this on notepad++
Nice
OMG, this is so complicated :'( :'(. no, it's not I just don't know about the data attribute.
click is not working for me :/
Thanks
How would you make proper links to those tabs so we can achieve following:
1. We can send direct link to certain tab
2. We can refresh tab it doesn't switches back to default active tab
Thank you!
Did you ever find the answer to this?
Update about this question
Super dude
you can also check this awesome animated tabs ua-cam.com/video/d9MW5nPIgSk/v-deo.html
nice!
Wow, with this method you can create a single website with more tabs, which can look like a navbar and make someone think this is a one page application 😆