You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Simple HTML & JS Tabs on Fri Nov 11, 2011 2:18 am

RockerMan

avatar
Administrator
OK so, today we going to learn how to make a simple set of jQuery tabs. They are nothing to special and have very little styling. But you can edit the style to make them prettier Smile

OK, so start off with you basic HTML template:
Code:

<!DOCTYPE html>
<head>
   <title>Example Page</title>
   <link rel="stylesheet" href="css/style.css" type="text/css" />
   <script type="text/javascript">

   </script>
</head>

<body>

</body>

OK, lets start the mark-up!
Inside the <body> tags create an unordered list item with a class of tabs:
Code:
<ul class="tabs">

</ul>

OK, now inside those tags you need to create some list items containing links, for this example I'll create 4 tabs:
Code:
<ul class="tabs">
   <li><a href="#" class="defaulttab" rel="tabs1">Tab 1</a></li>
   <li><a href="#" rel="tabs2">Tab 2</a></li>
   <li><a href="#" rel="tabs3">Tab 3</a></li>
   <li><a href="#" rel="tabs4">Tab 4</a></li>
</ul>

OK, now to explain the above code Smile ;
Code:
<li><a href="#" class="defaulttab" rel="tabs1">Tab 1</a></li>
<li> - This is just the list item tag
<a href="#" - This is a link leading to nowhere
class="defaulttab" - Now this is to hilight the current tab, we will be playing with this piece of code when we move onto the Javascript Smile
rel="tabs1 - This is the link leadning to the content

All this will become much more clear once you read the parts below!

OK, so now we need to create the tab content, this is how:
First we need to create a div with a class of tab-content and an id of the tab number you wish the content to be:
Code:
<div class="tab-content" id="tabs1">
   <p>This is some example text!</p>
</div>

So now the part above with the rel="tabs1", should become a little more clear Smile

You would keep adding these divs until you have the total amount you want, incrementing the number by 1:

Code:
<div class="tab-content" id="tabs1">
   <p>This is some example text!</p>
</div> <!-- end tabs1 -->

<div class="tab-content" id="tabs2">
   <p>This is some example text!</p>
</div><!-- end tabs2 -->

<div class="tab-content" id="tabs3">
   <p>This is some example text!</p>
</div><!-- end tabs3 -->

<div class="tab-content" id="tabs4">
   <p>This is some example text!</p>
</div><!-- end tabs4 -->

OK, now inside the script tags (inside the head) place this code:
Code:
      $(document).ready(function() {
   
         $('.tabs a').click(function(){
            switch_tabs($(this));
         });
   
         switch_tabs($('.defaulttab'));
   
      });
   
      function switch_tabs(obj)
      {
         $('.tab-content').hide();
         $('.tabs a').removeClass("selected");
         var id = obj.attr("rel");
   
         $('#'+id).show();
         obj.addClass("selected");
      }

Now because this script is based upon the jQuery library, you will need to include it inside the head tags too!

OK, now that the mark-up is out of the way. We gonna' start styling:
Code:
ul.tabs { width:500px; margin:0; padding:0; }
ul.tabs li { display:block; float:left;   padding:0 5px; }
ul.tabs li a { display:block; float:left; padding:5px; font-size:0.8em; background-color:#e0e0e0; color:#666; text-decoration:none; }
.selected {   font-weight:bold; }
.tab-content { clear:both; border:1px solid #ddd; padding:10px; }

The only thing you really need to change is the ul.tabs li a (This is targeting the unordered list in the element with a class of tabs, then it's finding the list item within that unordered list, then finding and links within that list item.)

OK, so if you've do it correct you should have a document that looks like this:
Code:

<!DOCTYPE html>
<head>
   <title>Example Page</title>
   <link rel="stylesheet" href="css/style.css" type="text/css" />
   <script type="text/javascript">
$(document).ready(function() {
   
         $('.tabs a').click(function(){
            switch_tabs($(this));
         });
   
         switch_tabs($('.defaulttab'));
   
      });
   
      function switch_tabs(obj)
      {
         $('.tab-content').hide();
         $('.tabs a').removeClass("selected");
         var id = obj.attr("rel");
   
         $('#'+id).show();
         obj.addClass("selected");
      }
   </script>
</head>

<body>

<div class="tab-content" id="tabs1">
   <p>This is some example text!</p>
</div> <!-- end tabs1 -->

<div class="tab-content" id="tabs2">
   <p>This is some example text!</p>
</div><!-- end tabs2 -->

<div class="tab-content" id="tabs3">
   <p>This is some example text!</p>
</div><!-- end tabs3 -->

<div class="tab-content" id="tabs4">
   <p>This is some example text!</p>
</div><!-- end tabs4 -->

</body>

Hope you enjoyed the tutorial and learnt something Smile

View user profile http://code-phase.forumotion.co.uk

2 Re: Simple HTML & JS Tabs on Fri Nov 11, 2011 8:06 am

Very well explained and tutorial shows clean. Wink

View user profile

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum

 

Create a forum | © PunBB | Free forum support | Contact | Report an abuse | Free forum