WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

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

1Simple Tabs Empty Simple Tabs Wed Oct 05, 2011 3:59 am

RockerMan

RockerMan
Technician
Technician
Simple Tabs
Learn to make a set of simple tabs


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, the 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
Rob


Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

http://www.graphics-post.com/

2Simple Tabs Empty Re: Simple Tabs Wed Oct 05, 2011 8:51 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Nice tutorial - great work Very Happy

http://woops.dk

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