How to create tabs using HTML, CSS and JavaScript
HTML-код
- Опубликовано: 27 фев 2018
- In this video I'll be showing you how to create tabs using html, css and JavaScript
Download Project code:
www.lohartalk.in/#/watch?v=PzS...
Please don't forget to like,share and subscribe my channel.
Fantastic work, this saved me from having to use the confusing electron-tabs module!
i from Russia but i understand ur language all time . Good pronunciation my friend!!
Thank you for your valuable feedback.
Thank you for the video! I just have one small request...please open the coding window enough to show all the code. It's hard to see the top lines of your javascript code.
Its nice that u have recap on explaining after doing all that code
I have been looking all over for a simple example of how to invoke a set of pages that each live in a different tab. What I need is a simple example of the syntax of the anchor tag. For example,
I'm new to Javascript but understood everything . Thank you soo much
Awesome work and explanation. Thanks a lot for this tutorial.
great...
Dude, you're an absolute legend for this video! Thank you for uploading it.
I’ve been looking for this but didn’t know that specific name for it thank you!
getting back into web development and glad I found some of your videos. Very clear and helpful guides!
Thank you for your valuable feedback.
I really hate HTML (web dev) and everything go over my head but u saved my day... thanks
You can also add animations to your tabs using css in the tabcontent section
.tabpanel {
animation: fadeEffect 1s;
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Where can i put this code ?
@@user-lb1fl7sh8m in css part of the program
nice video tutorial.. great its working
i have a search filter before the tabs then its working at the first tab only and its not working at the other tabs, the id's and classes are same but it cannot work..
thank you
please help me sir
Extremely useful ! Great work!
Thanks for this great tutorial. Its really very helpful :-)
congratulations on the video! God bless you!!!
Superb. Can you please tell me how to add a "close button" into each tab? Like when we click on the tab it gets highlighted and the close(x) button appears, if we click x the particular tab will be deleted.
Great instructional video! Good job at explaining what each thing does and why it’s added to the code.
if you want, you can also check this awesome animated tabs ruclips.net/video/d9MW5nPIgSk/видео.html
fantastic
Really helpful bro thnx
Good Tutorial, but you can also do this with one tabPanel div...
love it!! you are a lifesaver
Facing issue :- by default tab 1 is selected. When I'm clickinng on other tab page is getting refreshed and after refreshing again tab 1 is selected..
???
thank you very much, this video is simple and direct, find another video better than this I think it is impossible
Thank you so much bro, you save my life!
good work bro and good source code
Hello LoharTalk I've been wondering if I want to remove colors. Is it safe to make colorCodes to comments ?
Thank you 😉😉
I created a website which changes colour of background as we change values of rgb through metres on screen .. now I wanted to add functionality of gradient too but using your way I can change the page no issues but that same JS is now not letting me change values on gradient page while still working fine on Background page.. Please help if u can --> I will surely subscribe
how did words in the tabPanel(without using ) have breaks in the lines?
best💯
what is the command run in vsCode to see the output in localhost.
thank you very much
Thanks, bro! Well done!
thank you very mutch, this was very useful to me.
Superb, how to use in django
nice work, your tutorial is very helpful
if you want, you can also check this awesome animated tabs ruclips.net/video/d9MW5nPIgSk/видео.html
thank you ! you saved me
Thanks, bro!
Thank you!
I have to say, I normally hate the hindúes video, but this guys is awesome and clear to understand. Also, he explained js very clear. Keep it up, you will make it in RUclips. He earned my support!
Thank you for your valuable feedback. Now you can also Preview code demo and download it from www.lohartalk.com
It will appreciated if you can provide your feedback on our website www.lohartalk.com by click on Feedback link so that we can improve our services.
thanks. this is the best tutorial that comprehensive.
Thank you for your valuable feedback.
how can I have next and previous buttons using this code.
@@ibrahimhassan5411 Hi,call this method showPanel(0,'#f44336') where 0 is index of tab. you can increase or decrease it on next and previous button
Thankyou, this is very helpful. You deserves more likes! thumbs up👍
Thank you for the video, it was very helpful
Thank you for your valuable feedback. You can also view/download project from www.lohartalk.com
any idea why this will not work when working with php sessions?
Мои индусики Вы золотые)))
👏👏👏
ძმა ხარ. God bless ya!
how do i make one tab longer? if i just add more things and use ,its gonna leave "frame" or "background",please help
tabpanel play around that
I love you Man
you save me
what is the application i need to have this in my laptop
Thanks !!!
I've already sent the email sir for requesting codes for this. thankyouu
Hi,
We have already mentioned the link in video description.
Kindly find the link below.
www.lohartalk.com/#/watch?v=PzSxehu4G78
Below video name click on project code button
Let us know if you are unable to find.
Good stuff!
if you want, you can also check this awesome animated tabs ruclips.net/video/d9MW5nPIgSk/видео.html
You can in fact do this in pure CSS by using radio buttons
how to create a "add tab" where users can click and add a new tab page?
you promise new video whery?
How to add in blogger theme
honestly, i can't thank you enough
thanks!!
Unable to add eBay description...Please help me to add these Html , Css and JS file to ebay Description ...
Hi, I really enjoyed your video! I am having trouble executing the js function upon clicking the tab. Any suggestions?
You can visit www.lohartalk.com website and view/download the project for your reference.
i have the problem too sir please help me solve this
Download the project using this below link
www.lohartalk.com/#/watch?v=PzSxehu4G78
Is this responsive ...every thing cleared
..nice explination
No its not fully responsive.
hmmm
please tell me one reason why are you writting that editor?
Now i don't use that. Currently I'm using VS Code.
Can you please send the codes i need this on my capstone, pls
Please look in video description you will find the website link.You can download the project code from there.
how to rotate those tabs sir? anyway, thanks for awesome tutorial
Thank you for your valuable feedback. Kindly explain your question.
@@LoharTalk how to looping this . because when i make another tabs form in the same layer i have to edit that showPanel manually
In that case you need to dynamically create the tabs and buttons using javascript.While creating you assign unique ID to every tab and pass it to showpanel function.
@@LoharTalk sir, can you make example please? i try but still didn't get it. you can send it to yumand02@gmail.com thankyou
What is the name of the editor you are using
Phpstorm
What is the software that you used to create this?
VS code
@@LoharTalk Thanks
Can I use tag instead of ?
Yes you can but then you need to change css accordingly.
why i can't go to the project code described?
You can find project code at following path.
www.lohartalk.com/#/watch?v=PzSxehu4G78
You can do it only with css
Sir this code is not working
Plz help me
My panels are not coming only tabs and hover effect on them is visible
I followed this entire video
What's wrong ?
same problem occurs with me....... add your js file above body tag and then check...all will work
You can download the project code using link given in description.
my friend how i can display tabs all of page
check this is full page anmiated tabs , ruclips.net/video/d9MW5nPIgSk/видео.html
Can you provide the code aswell
Kindly provide your email id or mail us on lohartalk@gmail.com for the same.
tejindergrewal@outlook.com
thanks i am waiting for it
Kindly check your mail and let us know in case any concern.
bhosaleaniket5@gmail.com can you send the code
given link for download is not working
Hi link is working fine.Go to that link and click on "Project Code"
I am getting left-hand invalid in node part
Node.style.background-color=‘“”
Can anyone help please?
Try thi
Node.style["background-color"]=""
@@LoharTalk That worked, but now it says tabButtons.forEach is not a function
Hi,
Download the project code from below link
www.lohartalk.com/#/watch?v=5YKaBri5uP0
@@LoharTalkI just watched the video but there is no code related to this one?
Hi,
Download the project code from below link
www.lohartalk.com/#/watch?v=5YKaBri5uP0
i tried but i could not do this .pls help bro
You can download project code from below link.
www.lohartalk.com/#/watch?v=PzSxehu4G78
the link does not work
hola puedes poner el link de la descaga porfavor, no sale nada en este lik solo un menu
Kindly provide your comment in English
the link is not working
Here is project preview
www.lohartalk.com/assets/Preview/PzSxehu4G78/
I want the code can you send it to my by mail please
Which link is not working?
@@LoharTalk thelink you just sent to me and the one is the description
Try this and let me know
drive.google.com/file/d/1DH6UFcBTLSvl1FlvMkyqOeEH2EpwUgT9/view?usp=drivesdk
Download Project code: - reference don't work
Website under maintenance.
This is bad code, this isn't how devs should implement this idea