Advertisement

Creating Tabs with HTML, CSS & jQuery

In this tutorial, we’re going to look at how to create tabs in HTML, CSS and jQuery. If you get stuck, don’t hesitate to ask me a question.

Tabs are a great way of grouping lots of content into a very small space. Think of tabs like the TARDIS…bigger on the inside. They can be incredibly handy when you have a lot of content that would simply fill up your page with too much information in one go.

You might also like: Creating an Accordion with HTML, CSS & jQuery.

Table of Contents

  1. Skip to the HTML
  2. Skip to the CSS
  3. Skip to the jQuery

1.) The HTML

Completed Code (HTML)

I go into detail on the specifics of the HTML layout below.

<div class="tabs">
	<ul class="tab-links">
		<li class="active"><a href="#tab1">Tab #1</a></li>
		<li><a href="#tab2">Tab #2</a></li>
		<li><a href="#tab3">Tab #3</a></li>
		<li><a href="#tab4">Tab #4</a></li>
	</ul>

	<div class="tab-content">
		<div id="tab1" class="tab active">
			<p>Tab #1 content goes here!</p>
			<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
		</div>

		<div id="tab2" class="tab">
			<p>Tab #2 content goes here!</p>
			<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
		</div>

		<div id="tab3" class="tab">
			<p>Tab #3 content goes here!</p>
			<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
		</div>

		<div id="tab4" class="tab">
			<p>Tab #4 content goes here!</p>
			<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
		</div>
	</div>
</div>

Tab Links

Starting off there’s a div with class="tabs". Inside there’s an unordered list, (or an ordered one if you like, it makes no real difference), with class="tab-links". Inside the list items there are anchor links. The first list item is marked as class="active". This indicates where to start the tabs.

Note: When the CSS is all done, the tab link parent with class="active" will be the highlighted one on page load.

<div class="tabs">
	<ul class="tab-links">
		<li class="active"><a href="#tab1">Tab #1</a></li>
		<li><a href="#tab2">Tab #2</a></li>
		<li><a href="#tab3">Tab #3</a></li>
		<li><a href="#tab4">Tab #4</a></li>
	</ul>
</div>

Tab Content

There’s a div with class="tab-content". Inside ofΒ that, we have 4 divs, each with class="tab", (this number corresponds to how many tab links there are). The currently visible tab will also need an active class, e.g. class="tab active".

<div class="tab-content">
	<div id="tab1" class="tab active">
		<p>Tab #1 content goes here!</p>
		<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
	</div>

	<div id="tab2" class="tab">
		<p>Tab #2 content goes here!</p>
		<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
	</div>

	<div id="tab3" class="tab">
		<p>Tab #3 content goes here!</p>
		<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
	</div>

	<div id="tab4" class="tab">
		<p>Tab #4 content goes here!</p>
		<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
	</div>
</div>

2 The CSS

I’m going to keep it simple with basic CSS (as opposed to an SCSS pre-processor like Sass, Less or Stylus). The bulk of this tutorial is aimed at beginners, so I’m taking that into account.

Completed Code (CSS)

I go into detail on the specifics of the CSS styling below.

/*----- Tabs -----*/
.tabs {
	width:100%;
	display:inline-block;
}

/*----- Tab Links -----*/
/* Clearfix */
	.tab-links:after {
	display:block;
	clear:both;
	content:'';
}

.tab-links li {
	margin:0px 5px;
	float:left;
	list-style:none;
}

.tab-links a {
	padding:9px 15px;
	display:inline-block;
	border-radius:3px 3px 0px 0px;
	background:#7FB5DA;
	font-size:16px;
	font-weight:600;
	color:#4c4c4c;
	transition:all linear 0.15s;
}

.tab-links a:hover {
	background:#a7cce5;
	text-decoration:none;
}

li.active a, li.active a:hover {
	background:#fff;
	color:#4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
	padding:15px;
	border-radius:3px;
	box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
	background:#fff;
}

.tab {
	display:none;
}

.tab.active {
	display:block;
}

Tabs Container

TheΒ display:inline-block; adds a type of clearfix while also making it more ‘stable’ than if we used display:block;.

The reason we use a clearfix above yet not here is as follows: display:inline-block; sometimes adds 7px-ish of margin below the affected element with no way of removing it. Sometimes using a minus bottom margin works, but it depends heavily on how your HTML is structured. In this instance it’s fine.

/*----- Tabs -----*/
.tabs {
	width:100%;
	display:inline-block;
}

Tab Link Wrappers

We declare no list-style to stop it appearing as a default list. Then the margin so the links are spaced evenly apart, (using margin:0px 5px; is the same as using margin:0px 5px 0px 5px;).

.tab-links li {
	margin:0px 5px;
	float:left;
	list-style:none;
}

Tab Links

These are all basic styles which you should understand if you’re attempting this tutorial. If you don’t, please find the proper values and the definitions for each on the CSS-Tricks Almanac.

You may be wondering why I’ve used transition:all linear 0.15s; instead of transition:background linear 0.15s;. The reason is simple, in my experience, you have to think ahead. If you don’t then nasty, (sometimes hard to fix), bugs pop-up seemingly out of nowhere. By using background instead of all, we’d be limiting what can be transitioned on the :hover effect. Since this is a tutorial, many of you may want to change the text colour on hover. By using all instead of background that makes it possible.

.tab-links a {
	padding:9px 15px;
	display:inline-block;
	border-radius:3px 3px 0px 0px;
	background:#7FB5DA;
	font-size:16px;
	font-weight:600;
	color:#4c4c4c;
	transition:all linear 0.15s;
}

.tab-links a:hover {
	background:#a7cce5;
	text-decoration:none;
}

li.active a, li.active a:hover {
	background:#fff;
	color:#4c4c4c;
}

Tab Content

This is the background of the tab content section.

/*----- Content of Tabs -----*/
.tab-content {
	padding:15px;
	border-radius:3px;
	box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
	background:#fff;
}

Non-Active/Active Tab Content

We set all tabs to display:none; which hides them. Then we set the active tab to display:block; so only that one will show up. It’s a simple case of using CSS the way it was designed, which was to cascade down. Hence the name, Cascading Stylesheets.

.tab {
	display:none;
}

.tab.active {
	display:block;
}

You might also like: Creating a Dropdown Menu with HTML & CSS


3 The jQuery

Below you can see the completed jQuery code. Keep scrolling for a good explanation of how it all works and what it all means.

Let me clarify something before we start: Everyone has their own way of coding, with jQuery this is mine. Writing it out like this makes it easier for a beginner to grasp, it’s also efficient.

Completed Code (jQuery)

jQuery(document).ready(function() {
	jQuery('.tabs .tab-links a').on('click', function(e) {
		var currentAttrValue = jQuery(this).attr('href');

		// Show/Hide Tabs
		jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

		// Change/remove current tab to active
		jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

		e.preventDefault();
	});
});

Basic Setup

You have to start by checking if the document is ready, for this we use:

jQuery(document).ready(function() {
	// Code Here
});

Next is to check if the user has clicked on a tab, to do that we simply reference every link that happens to be a tab link with .tab-links a.

jQuery('.tab-links a').on('click', function(e) {
	// More Code Here
});

Dynamic Variable

Next, we create a variable called currentAttrValue, (current attribute value), which grabs the href="" of the clicked anchor link.

var currentAttrValue = jQuery(this).attr('href');

Match Anchor Link to Div #ID

We need a way of matching up the .tab-link anchors with .tab sections. We start off by referring to the entire tabs component, with .tabs, then we say “If .tabs has a child with an #id that then matches a .tab-link href="", then they should be linked up”.

Then we say “Show the element with the referenced #id, such as #tab2, then find the other tabs, which are siblings of #tab2, and hide them”.

jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

Giving The Tab Link an Active State

Changing the active state of the tab link is relatively the same as showing/hiding the tab content.

First, we look for jQuery(this), which is the current anchor link being clicked. Then we find it’s parent list item with .parent('li') tag. After that, we give that parent list item a class of .active by using .addClass('active'). Lastly, we find all siblings of that parent list item and remove, if any, classes of .active by using .siblings().removeClass('active').

jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

Prevent Default Anchor Link Behaviour

You may notice that when you click an anchor link with an #id specified instead of an actual URL, it tends to add the #id into the address bar. E.G. http://sebkay.com becomes http://sebkay.com/#id. This can be a massive pain-point for users when trying to click the back button.

To get past that UX problem we use:

e.preventDefault();

This handy little function stops the default action of the clicked element from happening.

Remember when we put that function(e)at the start of our click event? Well, this is where that ties in.


Extra Credit: jQuery Animations

You may not like the way it just jumps to the new tab content without any nice animation of any kind, well here’s some extra credit.

To apply these changes simply replace the below snippet with the other code snippets that follow.

Default

// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

Fade

// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();

Slide 1

// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);

Slide 2

// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400);

Conclusion

If you’re reading this conclusion, (most people, including me, tend to leave after they’ve got the code they were after), then please leave a comment below with any problems or bugs regarding this tutorial. I’m writing this to help people learn and become the best they can be.

You might also like: 21 Must-Have Front End Development Tools.

Advertisement

Web designer and developer from Southampton, UK.


Leave a Comment

Comments (553)

PI_newbie

6th, May 2014 at 2:27 pm

How can I switch through the tabs with buttons?
Thanks πŸ™‚

Reply

kyle

6th, May 2014 at 2:54 am

It’s definitely an ajax incompatibility πŸ™

I wasn’t quite accurate in the first post, there is a second ajax call that loads the tabbed results created from a db query. I can just hard code it at the bottom of the html and it works, but if I send the exact same html back from an ajax call it doesn’t work. It seems ajax and tabs just won’t play together, the best you can do is to use ajax to fill an existing tab. Unfortunately I need to create the tab set on the fly and send the complete html, which from everything I’ve read, can’t be done, even using jquery tabs or jquery tab plugins.

Nice code, too bad I can’t use it. Perhaps this can serve as a lesson to others πŸ˜‰

Reply

kyle

6th, May 2014 at 12:13 am

Is this not compatible with jquery ajax?

I have a page that is php generated and uses jquery’s ajax post to load a chained select, the page works fine locally and in jsfiddle, and on the server, but as soon as I generate it from a php script it doesn’t work. I can even save the output as an html page and the tabs work. The only things different in the php version are a couple of included php functions and the ajax call from the first select.

I’m using your js file from the demo page and I’ve even copied out the standard tab demo and pasted it directly to bottom of the html page to be output, and that won’t work from the php page either. But if I save that same output as html they all work.

I’m stumped and I’ve wasted 4 hours on this already, I am open to any thoughts or suggestions you might have.

Reply

nandu

5th, May 2014 at 11:40 am

CAN U SUGGEST ANY STUDY MATERIEL.

Reply

Alex

4th, May 2014 at 10:15 pm

very well explained…thank you very much for helping me understand those lone of code…

Reply

Sugandha

4th, May 2014 at 5:45 pm

Thanks Seb…..
One more help I need. I am trying to create drop down with checkbox in its every option using jquery. Instead of crating multiselect drop list this is my requirement. Can you please help me with this??

Reply

Shalini

4th, May 2014 at 10:24 am

Hi Seb,

Really helpful post. But I have a requirement where by on button click my first tab should take me to the next tab. could you please suggest ?

Thanks in advance

Reply

Seb Kay

3rd, May 2014 at 4:33 pm

Hi Sugandha,

It was an easy mistake to make. The problem was a typo. Instead of the code saying $(this).attr('href'); it said $(this).attr('herf');. Notice the use of herf when it should be href.

Here is an updated version: http://jsfiddle.net/kVd74/8/

Happy coding!

Reply

Sugandha

3rd, May 2014 at 2:37 pm

Hi Seb,

I have tried the same design. And tab content is not changing. I have tried all the suggestion posted below but still not working.

Please have a look at my code. http://jsfiddle.net/Sugandha/kVd74/5/

Reply

Dave

28th, Apr 2014 at 8:21 am

Hi Seb
Sorted

Reply

Dave

28th, Apr 2014 at 8:10 am

Hi Seb
Great tutorial
Works fine on Html pages
Having a problem getting it to work on aspx page
Any help would be great
Cheers

Reply

Dave

28th, Apr 2014 at 8:05 am

Hi Seb,
Just what I have been looking for
Works great on html pages
Having problems on aspx pages. Tabs will not change
Any help would be great
Cheers

Reply

Black

24th, Apr 2014 at 3:23 pm

Nice one

Reply

Seb Kay

23rd, Apr 2014 at 10:26 pm

Hi Maramau,

The tabs are set up in a way that only the tabs can change the content.

If you would like, I can post a JSFiddle on how to modify the code?

Reply

maramau79

23rd, Apr 2014 at 4:19 pm

Hi Seb, thanks for your great and usefull tutorial.
I was able to let it works fine but I have a question:
Where I have to modify in order to have a button to go to the next tab instead of press “Tab #2” or “tab #3″… ???

Thanks in advance and kind regards

Reply

Alok

23rd, Apr 2014 at 11:07 am

Thanks,yeah i worked that out myself πŸ™‚
thanks anyways πŸ˜‰

Reply

California Solar solutions

22nd, Apr 2014 at 11:55 pm

This was decent but i cant say it was helpful. Maybe i need more practice because i dont know much about jquery

Reply

Seb Kay

22nd, Apr 2014 at 11:41 am

Hi Alok,

Check here for my updates to your code: http://jsfiddle.net/5Y5mm/3/

I believe the problem is that you’re not including a copy of jQuery properly, since your code seems fine. It wasn’t working on the JSFiddle because you weren’t including jQuery πŸ™‚

Reply

Alok

22nd, Apr 2014 at 4:01 am

Hi Seb,
Could you please help me,I’m kinda stuck here. Neither my content is changing,neither is the active Tab.
Here is the fiddle: http://jsfiddle.net/5Y5mm/

Reply

Jack Wright

19th, Apr 2014 at 6:22 pm

Thank you soo much, and sorry for commenting twice… πŸ™‚

Reply

Seb Kay

19th, Apr 2014 at 3:23 pm

All you need to do is remove the class of standard in the jQuery.

So $('.tabs.standard .tab-links a') becomes $('.tabs .tab-links a').

I’ve updated the tutorial in regards to this.

Working example: http://jsfiddle.net/yZYtL/1/

Reply

Jack Wright

19th, Apr 2014 at 2:37 pm

I basically used the code that you had put in the tutorial…
http://jsfiddle.net/yZYtL/

Reply

Jack Wright

19th, Apr 2014 at 2:36 pm

I basically used the code that you had put in…
http://jsfiddle.net/yZYtL/
thank you,
I am planning to make some PHP forms… I’m new to Javascript and css

Reply

Seb Kay

19th, Apr 2014 at 11:32 am

Hi Jack.

No problem, I’m here to help πŸ™‚

It’s most likely that the css classes on the tabs are incorrect. Can you post a jsFiddle for me to look at? http://jsfiddle.net

Reply

Jack Wright

19th, Apr 2014 at 11:15 am

Okay, So I have set up a new jquery file and linked it in, but the tabs do not change, it just stays the same please help… I’m new to this too… Thank you in advance

Reply

JohNG

17th, Apr 2014 at 11:22 pm

Nice and just what I was looking for. Clean, simple and effective. I’m always struggling with the <base
If I leave it as is (the root of my website) the tabs point to the root + #home, even in a subdir
If I change the <base to the page with the tabs, I have to change all the links in my cms to the graphics, scripts etc.

Reply

Jonathan

17th, Apr 2014 at 3:34 am

Seb,

Thanks! It works perfect.

All the best –

Jonathan

Reply

Seb Kay

16th, Apr 2014 at 8:07 pm

The problem is here: '.tabs.standard .tab-links a'. Just remove the .standard class and it works fine πŸ™‚

Example: http://jsfiddle.net/9upv6/1/

Reply

Jonathan

16th, Apr 2014 at 5:23 pm

Corrections:

I also tried: https://code.jquery.com/jquery-1.11.0.min.js and linking it directly to the file: src=”js/bbfTabs.js” , neither seemed to work.

Reply

Jonathan

16th, Apr 2014 at 5:19 pm

Seb,

This link should work: http://jsfiddle.net/jhannah1357/9upv6/.

I also tried: and linking it directly to the file: , neither seemed to work.

Thanks again for your time…

Jonathan

Reply

Seb Kay

16th, Apr 2014 at 4:43 pm

Hi Jonathan,

The link to the jsFiddle you posted didn’t seem to work. Could you check it?

Make sure you’re including a copy of jquery correctly. e.g. https://code.jquery.com/jquery-1.11.0.min.js

The majority of the time it’s not including the file correctly. Let me know if this fixes it for you πŸ™‚

Reply

Jonathan

16th, Apr 2014 at 4:38 pm

Hi Seb,

Thanks for the tutorial. I am having a problem though. When I click the tabs they do not become active and the content remains the same (tab1). I thought I had missed something in the programming, so I copied the tutorial files directly into JSFiddle ). I still could not get it to work, what I’m I missing?

Thanks,

Jonathan

Reply

Seb Kay

14th, Apr 2014 at 8:46 am

Hi Aiza, it’s a clearfix. It basically stops the containing div breaking. Read this article on clearfix to get a better understanding of what it does and why we need it πŸ™‚

Reply

Aiza

14th, Apr 2014 at 2:10 am

Hi,
What’s the purpose of ‘after’ in this line .tab-links:after in your CSS?

Reply

Seb Kay

11th, Apr 2014 at 1:07 pm

Hi Roy. The first part that goes '.tabs ' is simply refering to the parent container. I like to be a little more specific with my jQuery than some people but you are also correct, it will work without the '.tabs '.

All you need is a parent element with a class of “tabs” for it to work, like in the example πŸ™‚

Reply

Roy

11th, Apr 2014 at 9:16 am

well, the code given above for jquery did,nt seem to work, but if you change it a bit it works like a charm πŸ™‚
the code give: $(‘.tabs ‘ + currentAttrValue).show().siblings().hide();

if you change it like: $(currentAttrValue).show().siblings().hide();
it works fine πŸ™‚

enjoy!

thanks for this script

Reply

Sam

6th, Apr 2014 at 7:00 pm

that will be great Seb im waiting on that as soon as you post it im gonna study it and include it on my site. at the moment im using facebook plugin and dont like it that much.. πŸ™‚

Reply

Mark

6th, Apr 2014 at 4:25 pm

OK, thanks Seb. Because I am new with web deverlop, so until you said “is being included properly”, I just know that must include Jquery link ( link from code.jquery.com) to html file work. Now, my code work well, again thanks for your time. Have nice day! πŸ™‚

Reply

Seb Kay

6th, Apr 2014 at 2:07 pm

Hi Mark, the code you posted seems to work fine (I copied it into JSFiddle to make sure).

Have you double checked the jquery file you including jquery.js is being included properly and is the latest version of the jQuery library?

It may be in a folder, like js/jquery.js.

Reply

mark

6th, Apr 2014 at 1:56 pm

Hi Seb, thanks for your fixed code. It work well but when I put it into my html/js file and try to run, this code don’t work (of course, I put html and js file together in a folder). I copy my files to Pastebin.
html file: http://pastebin.com/yMUVj81M
js file: http://pastebin.com/EXv4ctdV

Thanks for your time.

Reply

Seb Kay

6th, Apr 2014 at 12:48 pm

Mark, here is the working code: http://jsfiddle.net/DDV98/3/

The problem was a few things. The first was that jQuery wasn’t being included properly.

The second was that you had $('.tab'+currentAttrValue).show().siblings().hide();. It should be ‘.tabs’ and then a space. Check my JSFiddle if you want a closer look πŸ™‚

Reply

Seb Kay

6th, Apr 2014 at 12:41 pm

Mark, I’m just taking a look at your code and will post when I’ve found the problem πŸ™‚

Reply

Seb Kay

6th, Apr 2014 at 12:38 pm

Hi Sam. That sounds like a good idea. This site is made with WordPress and the comments area is custom coded.

I’ll try and write up a tutorial over the next week πŸ™‚

Reply

mark

6th, Apr 2014 at 3:39 am

Hi Seb, this is my code: http://jsfiddle.net/markstevens/DDV98/1/ . I am new with js and jquery, may I wrong at somewhere in my code, I hope you can fix it and point out what I do wrong. Thanks.

Reply

sam

5th, Apr 2014 at 9:33 pm

hie seb, thanx for the article it helped me clarify a few things didnt have problems as im a bit familiar with CSS3 and Jquey, however i wish to learn how to include a comment box like this one on a website. it might not be a tutorial but just tell me how to do and i will appreciate it. a tutorial will be good thou

thanx in advance

Reply

Seb Kay

5th, Apr 2014 at 7:17 pm

Hi Mark. The problem is most likely not adding the class of ‘.active’ to the first tab link and first tab content section when the page loads.

If that doesn’t fix it, then please post your code to http://jsfiddle.net for me to take a look at πŸ™‚

Reply

mark

5th, Apr 2014 at 5:07 pm

Hi Seb, I followed this tut, but when I move from tab to tab, content of the tab isn’t change , it always keep content of Active tab. So, what can i do to content of the tabs can change.

Reply

genie

16th, Mar 2014 at 1:56 am

Hi, thanks

Reply

Seb Kay

15th, Mar 2014 at 4:55 pm

Hi, the best place to put the jQuery code is in a separate file and then include it into the page with a script tag.

This post is a good reference: http://www.mkyong.com/javascript/how-to-link-an-external-javascript-file/

Reply

genie

15th, Mar 2014 at 4:28 am

where can I add jquery code?

Reply

nigel

31st, Aug 2014 at 7:27 am

seb kay, it was a pleasure to see this post and i am very thankful to know the codes for tabbed but when i follow what is written on your post, there’s still a problem that i encounter. i just also do copy/paste but it is a failure

Reply

Seb Kay (Author)

31st, Aug 2014 at 10:43 am

Can you give me a little more information or post a http://jsfiddle.net/ of your code?

Reply

Pingbacks (1)

Advertisement

Inspirational Newsletter

Join the newsletter to get the best articles, tutorials and exclusive freebies every two weeks.

No spam. You can unsubscribe at any time.