dream genie
 
CMS and Website Builder
contact us
 
+44 (0)1392 202078
 
 
You are here: Home > Blog > Creating a tab control in your web page   Go Back

Creating a tab control in your web page

Posted: Sunday, 6th February, 2011 at 11:00 AM | By: Administrator
Feb
6
 

A simple working example

Let's jump straight in and see the completed working example. Below we have three tabs. The third has a link to the first and demonstrates how we can activate tabs and link to them. This is discussed in section 3.

Tab control example using click to change tabs


Tab control example using mouseover/hover to change tabs


Section 1: Include the required files.

First off you will need to include the supporting files. Paste the following into the [Additional Javascript] section of your Webpage or Article Template.

<link  rel="stylesheet" type="text/css" href="[ siteroot ]_style/dgtabs.css?v=0" />
<script  src = "[ siteroot ]_javascript/dgtabs.js" type = "text/javascript" > script>

Section 2: Create your tabs

below is the basic format for the tabs. 

  • In the first line set the width as required and give the div (this is the wrapper div) a unique classname (in the example below we use 'tabinstance1'), we will use this later in section 4 to initialise the tab control.
  • Then the tabs are defined. using a UL and as many LI's as required. Create as many tabs as required by adding additional li elements. NOTE: the UL class name must have the class name 'dgtabs'
  • Then the tab content areas are defined. These are are wrapped in a div whose that requires the class name dgtab_container, ensure you have as many tab content divs as there are tabs (above). NOTE: The tab content div's require the class name 'dgtab_content'.
  • NOTE: Ensure the rel values for your dgtabs anchors are unique (in this example we use 1 2 and 3 and also ensure the id values for your dgtab_content divs are unqiue, in the example we have used tab1, tab2 and tab3


<div style="width: 100%;" class="tabinstance1"
    <ul class="dgtabs"
        <li><a rel="1"href="#tab1">NEWS </a></li
        <li><a rel="2"href="#tab2">HEADLINES AROUND THE WEB </a></li
        <li><a rel="3"href="#tab3">LATEST VIDEO </a></li
    </ul>
    <div class="dgtab_container"
        <div id="tab1"class="dgtab_content"
            hello tab 1 
        </div>
        <div id="tab2"class="dgtab_content"
            hello tab2 
        </div>
        <div id="tab3"class="dgtab_content"
            Hello tab 3 
            <onclick="javascript:seekToTab(1,'tabinstance1');return false;"href="#">
                link to tab one  
            </a>
        </div>
    </div>
    <div style="clear: both; font-size: 1px; line-height: 1;"
    </div>
</div>

Section 3: Creating a hyperlink to a tab

To link to a tab and have the tab contents displayed and become the active tab use the seekToTab() function as below, there is a is demonstration of this in the working example above.


<onclick="javascript:seekToTab(1,'tabinstance1');return false;" href="#">
   link to tab one

</
a>



Section 4: Initialise the tab control

You will need to initialise your tab control. For this add a call to initialiseDGTabs() in your javascript block in the same place you added the include files in section 1.

NOTE: The 1st parameter to pass in is the name of the outer wrapper div of your tab control, in this example it is 'tabinstance'.

Change Tabs on Hover or click
The 2nd parameter specifies how you want this tab control to switch tabs, state either click or hover.


<script type="text/javascript"language="javascript"
    $(document).ready(function() { 

        initialiseDgTabs("tabinstance1","click"); 

    });  
</script>

Section 5: Creating multiple tab controls on a page.

You can have as many tab controls appear on a page as required.

Read section 2 carefully, and ensure the div outer wrapper classname is unique and create an additional call to initialsieDGTabs() for each control you create (see section 4 above), check that your dgtab_content dvs have unique ids and the anchors within the dgtabs UL have unique rel values.


 


Visit the blog archive »

You are welcome to post a comment


To Verify You are Human!
Please enter the code above:

Previous Comments

dc wrote:
18 March 2015 11:41

Hello It is very helpful. But I ould not find the ccs. I would like to know where I can find "dgtbs.ss" for your code to work perfectly. Thank you. DC



dc wrote:
18 March 2015 11:36

Hallo%2C%0A%0AIt%20is%20very%20helpful.%20But%20I%20could%20not%20find%20the%20css.%0A%0AI%20would%20like%20to%20know%20where%20I%20can%20find%20%22dgtabs.css%22%20for%20your%20code%20to%20work%20perfectly.%0A%0AThank%20you.%0A%0ADC%0A



web design wrote:
06 November 2014 09:05

I like the post! It’s really informative. Good job! :)



Stephen wrote:
14 December 2012 07:45

nice%20job



Ant wrote:
04 October 2012 14:54

Thanks for the great tips



Nguyen An Trung wrote:
29 September 2012 10:55

get%20code



a wrote:
27 April 2012 11:57

good



forex robots trading online wrote:
25 January 2012 23:58

Thanks%20for%20the%20steps.great%20help%21