How to create html tabs within a single page?

Asked By Vanessa Onnoya 50 points N/A Posted on - 12/01/2012

 

 

Hi,

How to create html tabs within a single page? I was asked by our project manager to improvise our old website company. And the website is composed of html codes and php programming language. I hope you can provide me a video tutorial and tips on how to complete this task accordingly.

Regards,

Vanessa Onnoya.

• Status: Open
• Question Views: 1080
• Answer Count: 2
• Vote Up 0 Vote Down

• Answer Accepted: Yes
• Question Category: Development Software

Best Answer by carpenter harrer

Go To Solution

Answered By Allen Kenneth 20 points N/A #182447

How to create html tabs within a single page?

Hello Venessa,

You can add more tabs to your web page and help your site visitors find the required information or category easily without making them bothered to scroll down and search for everything. 

JavaScript is used to create this tabbed effect and style it more using CSS.

All workaround and scripts are given in this URL: http://www.chouselive.org/2010/04/creating-tabs-within-page.html

Also you can learn something from this Video tutorial (YouTube): 

Credit goes to the original author.

Hope this info will help you. Regards!

 

About Allen Kenneth

Questions
1

Answers
100

Best Answers
74

• Vote Up 0 Vote Down

• Posted on - 12/13/2012
• Question Category: Development Software

Best Answer

Best Answer

Answered By carpenter harrer 5 points N/A #182448

How to create html tabs within a single page?

Hi Vanessa,

Some basic facts that you should understand when trying to make a tabbed HTML file is that; you are converting your HTML file into a dynamic tabbed interface, there is no need to create a list of links or 'a hrefs' for the tabs created, use CSS to change the look and feel of the tabs, you use JavaScript to set which tab is displayed. Therefore if you don't know how to script using JavaScript, I suggest you learn how to since the tabs are created using jquery.

For a worked example that you can view on the web browser and its source files, go to the link http://jqueryui.com/tabs/ and learn more from the examples.

The basic steps to follow are given below:

1. First step;

Assume this is part of your html file;

<h2>Part One</h2>

content one
content two
content three

add some DIVs to structure your code like below;

<div class="tabsview">

<h2>Part One</h2>

content one
content two
content three

</div>

Around each content, add another div class;

<div class="tabsview">

<h2>Part One</h2>
<div class="tab" title="TabTitle">

content one

</div>
<div class="tab">

content two

</div>
<div class="tab">

content three

</div>
</div>

2. Second step;

Include the JavaScript code:

<script type="text/JavaScript" src="tabsview.js"></script>

Note: The script runs to convert your plain HTML into dynamic HTML after your page loads.

About carpenter harrer

Questions
2

Answers
34

Best Answers
27

• Vote Up 0 Vote Down

• Posted on - 12/18/2012
• Question Category: Development Software