How to create html tabs within a single page?

Asked By 50 points N/A Posted on -
qa-featured

 

 

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.

SHARE
Best Answer by carpenter harrer
Answered By 20 points N/A #182447

How to create html tabs within a single page?

qa-featured

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!

 

Best Answer
Best Answer
Answered By 5 points N/A #182448

How to create html tabs within a single page?

qa-featured

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>

  1. 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.

Related Questions