Add Tabs to Your Web Interface Using PHP and CSS
Use HTML and CSS to create a tabbed interface for your web application.
Sometimes there is just too much data to put onto one web page. An easy way to break up a site (or even a content-heavy page) is to display it using tabs, where the data is broken up into subelements, each correlating to a named tab. Lucky for us, tabs are a piece of cake with PHP.
The Code
Save the code in Example 1 as index.php.
Example 1. Using the tabs library to show a tabbed interface
This is the first tab.
This is the second tab.
Next, code up a nice PHP and CSS library. Save the code in Example 2 as tabs.php.
Example 2. Using PHP and some CSS to create user-friendly tabs
.tab {
border-bottom: 1px solid black;
text-align: center;
font-family: arial, verdana;
}
.tab-active {
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
text-align: center;
font-family: arial, verdana;
font-weight: bold;
}
.tab-content {
padding: 5px;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
0 )
endtab();
$tabs []= array(
title => $title,
text => “”
);
}
function tabs_end( )
{
global $tabs;
endtab( );
ob_end_clean( );
$index = 0;
if ( $_GET[’tabindex’] )
$index = $_GET[’tabindex’];
?>
| “> |
| “> |
I designed the API on this tabs system to make it easy to create tabs in your document. It starts with invoking tabs_header in the header section of the document. This will set up the CSS for the tabs. Then, within the body, the call to tabs_start sets up the tab system. Each new tab starts with a call to tab with the name of the tab. The call to tabs_end then ends the construction of the tabs.
Internally, the tabs system uses output buffering to hold onto the contents of each tab, and to display whichever tab is selected “on top.”
