Name: わずか12分でHTML/CSSを使ってタブを構築する (Build Tabs Using HTML/CSS In Only 12 Minutes)
Uploaded: 2021-01-14T10:23:11.000Z
Duration: 12 min 8 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

And in this video, we're gonna use HTML, CSS and JavaScript to make tabs in on Lee 12 minutes.

And I'm not gonna mess around on any extra information that you don't need because at this channel I like to make things as simple as possible.

So while these tabs are gonna look a little bit ugly, it's perfectly OK because they're completely functional and super easy to plug into whatever set you want to use them in.

So without any further ado, let's get started.

Now, before we start coating this project, let's take a look at what the actual project will look like.

As you can see, we have our tabs over here on the right, which, when we highlight over them, issues going toe hover a little color to let us know we can click on it, and when we click on it, it's going to show us that tab Content as well is highlight the tab that we've currently selected.

So to get started making these tabs, the first thing we need to do is of course, crater html page.

We're gonna call index dot html And if we click exclamation point and hit enter, it's going to default all of this code force if we're using Emmett inside of visual studio code, which is the default visual studio code.

Next, we can just type in our document title, which in this case is just going to be tabs.

And now, instead of the body, we can actually get to work creating our tabs.

And this is actually gonna be straightforward, but we're gonna have is we're gonna have a list up here, which is going to be a nun ordered list.

So it's create that on ordered list and inside of here we're gonna have list elements, and these list items are going to be the 1st 1 is just going to say home the 2nd 1 here is going to save pricing and then lastly, we have the 3rd 1 and this one is going to say about now that we have our actual items out of the way, we can create our different content down here, And to do that right, you're going to wrap all of them inside of a single div, which is going to have the class here of tab content, and then each one of these is going to have a single DIV, which is going to have our content.

So this 1st 1 is going to be our home content.

So it's given I d here of home and then inside of here we can first put in our content which, in our case, where you can't have an h one that says home and then you're gonna have a paragraph tag and this is just going to say something along the lines of this is the home.

Let's copy this down a couple more times making sure that we keep this inside of our tab content section.

So we have our home, we have a pricing and we have her about and appear we're gonna have been pricing and about for a different titles.

And for our actual page description, we can stay some information on pricing and overhearing the about.

If you have that extension installed in visual studio code and As you can see, we have our three different tabs up here as well as the different content for a taps.

Obviously, this is not correct because things were showing where they shouldn't be.

But we can fix that pretty easily by using some Java script.

We just come in here, we can type in our script and we want first to have a source of script dot Js, which would be the Java script file we create.

And we also want to make sure we defer the loading of this.

Now let's create that Java script script at J s and inside here, we're gonna put all the code for making our tabs work.

So the very first thing we need to do is we need to build it whenever we click on a tab.

So if we click on home over here, we want to show this home section and hide everything else.

So the first thing we need to do is build toe, have our tabs link up to a specific section, and I can actually really easily be handled in our html by using data attributes so we can come in here and we could just say data Whoops, data tab, target.

In our case, we have ideas and all of these so we can just make this one select our home, I d And we could do the same exact thing.

Just copy this down for pricing and about so we can select the pricing tag.

And down here we can select the about section.

So now each one of these tags has a target that selects the specific did that we want to show in our case, home pricing or about So now, instead of our script, we can select all those tags.

We could just create a variable called tags and we can use the documents dot query selector all which is going to allow us to select everything that has a specific selector.

In our case, we want to select where its data tab target lips target.

And this right here is all of our different tabs.

Make sure we spell it tabs and what we want to do is we want to look through all these taps so we can just say tabs dot for each and we're gonna get a single tab.

And for each one of these tabs, But we want to do is we want to add an event listener so we can just say tab dot at event listener every time that we click on the tab, we want to run the code inside of this function here.

So what we want to do is we just want to show that particular tab, and that's actually fairly straightforward.

This is going to be from our data attributes.

So we can just say tab dot data set data said dot tab target, which is what we set right here in our HTML.

And this is going to be the selector that we can use with document that query selector, and we just pass it to the here just like this.

And essentially, this is going to get us that tab element for example, this home element for this pricing element based on whichever tab that we clicked because of this tab target that we set here and then only wanted to do is show that target.

So an easy way to do that is to add a class.

So we're just going to say, target dot class list dot ad And we want to add the active class, which we're gonna style using CSS to make it so that this is actually visible.

Make sure we include that inside of our age, Tino, Just like this.

We have a draft which links to style CSS.

And lastly, we need a rail of style sheet.

So the browser knows that this is the style sheet and not something else.

And now inside of here, where we can do is first.

Actually, we should probably add a class to each one of these different tabs.

And actually, instead of a class, I think I'm gonna actually use the data attribute so we could just say data tab target actually tab content.

Each one of these is going to be a tag target.

And now, instead of our style shoots, we can actually select that by saying data tab content and inside of here, what we want to do is first make them absolute hidden.

So now if we save this, you can see all of our different tab content has disappeared.

But if we have an active one, so, for example, data tab content and we want to check for If we have the active class set to that, then we want to make it visible.

So we just come in here and we can say Display is going to be a Glock.

Now we say that you'll see that nothing changes over here, and that's because we haven't actually said that active class.

But as soon as we click on one of our tabs, for example, home, you'll see that that home is now being shown up.

But we have a problem once we click on another tab that tabs being shown up and none of the old tabs are actually disappearing.

So let's read the code that's gonna make our old tabs disappear whenever we click on a new tab.

And to do that, we need to actually select all of our different tabs.

So inside of our job script, what we can do is we can get our tab contents so we can say in here we want to get tab.

Contents were gonna set that equal to document dots.

Whoops dot Cleary selector all and we just want to select on that data attribute which we just set, which is data taboo content.

So now we have a variable here tab contents, which contains all of the different contents for a tab down here.

And all we need to do instead of here is we wanna look through each one of those so we can say for each tab content.

What we want to do is just remove that active class so we can say class list dot remove and we'll remove active.

And let's actually pushes onto another line so that it's easier to read for all of you.

And essentially, what we're doing is first, we're getting our target for what tab we clicked on.

Then we're making all of the tabs disappear.

And then on Lee making the tab that we click on active.

So let's click on home and you can see it shows up.

And now when we click on about, you can see the about section shows up and pricing, and this perfectly works for all the different tabs.

Actually, we can just come in here and add a class of active to whatever tab we want to be active by default for our case home, which put class active.

And now when we say that you see home is the 1st 1 that shows up.

What if we move this class active and let's say we move it down to pricing now you can step.

Let's put this back under our home because that's where we're gonna want it for the rest of our application.

So now that we finally have all of the Java script that we're gonna need for now out of the way, let's work on styling this to make it look a little bit better.

To do that, we want to first build a select our list over here so we can add a class which is just going to be tabs because this is going to contain all of our tabs, and we also want to be able to select each of our individual tabs.