Lo único que está haciendo es llamar con una variable el contenido que desea mostrar. Es decir envia una petición y con PHP lee que contiene la variable y muestra conforme a lo que dice la variable. Es algo sencillo, algo así
Código PHP:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tab list</title>
<style>
*{ margin:0; padding:0; }
#content{
width: 350px;
margin: 0 auto;
border: 1px solid #000;
}
#menu{
list-style-type: none;
margin: 0;
width: 100%;
}
#menu li{
display: inline-block;
background-color: #ccc;
padding: 10px;
border-bottom: 2px solid #000;
border-right: 1px solid #000;
}
#menu li a{ color: #777; }
#menu .selected{
background-color: #fff;
border-bottom: none;
}
#menu .selected a{ color: #000; }
#menu .rest{
width: 162px;
border-right: none;
}
</style>
</head>
<body>
<div id="content">
<?php if(empty($_GET['tab'])){ ?> <ul id="menu">
<li class="selected"><a href="
<?php echo $_SERVER['PHP_SELF']; ?>">First</a></li><li><a href="
<?php echo $_SERVER['PHP_SELF']; ?>?tab=2">Second</a></li><li><a href="
<?php echo $_SERVER['PHP_SELF']; ?>?tab=2">Third</a></li><li class="rest"> </li>
</ul>
<div id="message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque gravida
luctus tempor. Quisque risus nisl, eleifend at pellentesque sed, aliquet non
odio. Morbi diam felis, elementum dictum facilisis id, sollicitudin vel nisi.
Nunc vitae magna lorem, eu pharetra est. In hac habitasse platea dictumst.
Aliquam dignissim nibh nec elit tempor pulvinar. In hac habitasse platea
dictumst. Maecenas sit amet arcu non tortor fringilla interdum vitae eu arcu.
Pellentesque porta porttitor augue, blandit lobortis augue sagittis imperdiet.
Nunc eget arcu ac enim consectetur porta vitae ac tortor.
</div>
<?php }elseif($_GET['tab'] == 2){ ?>
<ul id="menu">
<li><a href="
<?php echo $_SERVER['PHP_SELF']; ?>">First</a></li><li class="selected"><a href="
<?php echo $_SERVER['PHP_SELF']; ?>?tab=2">Second</a></li><li><a href="
<?php echo $_SERVER['PHP_SELF']; ?>?tab=3">Third</a></li><li class="rest"> </li>
</ul>
<div id="message">
Maecenas auctor enim sed quam pharetra sed cursus odio vehicula. Fusce eleifend
volutpat fringilla. Sed sit amet felis sem, nec lacinia sapien. In orci velit,
tincidunt et aliquet sed, accumsan non lacus. In eget erat lectus, sed adipiscing
felis. Vivamus gravida, dolor quis facilisis volutpat, nunc tortor ornare nunc,
eget fermentum felis risus vitae urna. Duis varius convallis ipsum. Vivamus vitae
urna turpis, eu scelerisque neque. Nam imperdiet mattis velit sit amet
scelerisque. Nullam sagittis malesuada dolor nec condimentum. Sed mattis, nibh
ut fermentum aliquam, sapien nibh interdum lacus, eu ultrices risus leo a elit.
Cras non nunc velit.
</div>
<?php }elseif($_GET['tab'] == 3){ ?>
<ul id="menu">
<li><a href="
<?php echo $_SERVER['PHP_SELF']; ?>">First</a></li><li><a href="
<?php echo $_SERVER['PHP_SELF']; ?>?tab=2">Second</a></li><li class="selected"><a href="
<?php echo $_SERVER['PHP_SELF']; ?>?tab=3">Third</a></li><li class="rest"> </li>
</ul>
<div id="message">
Integer sed lacus vel sem rhoncus pretium. In porttitor arcu quis nisi feugiat ut
dapibus elit venenatis. Suspendisse elementum arcu nec neque bibendum viverra.
Pellentesque feugiat, lorem sed rhoncus porttitor, enim arcu placerat justo, ut
fringilla enim tellus sodales nisl. Proin metus ipsum, facilisis at adipiscing
non, adipiscing non dui. Maecenas accumsan varius tincidunt. Donec sollicitudin
aliquam vehicula. Integer eros enim, faucibus in pharetra non, pulvinar eget
sapien. Cras varius, est sed convallis interdum, lacus ante pellentesque sapien,
sit amet vehicula metus nisl dictum mi. Ut tristique est vel ipsum venenatis
bibendum eu vel arcu. Maecenas egestas ultrices leo, a ullamcorper turpis volutpat
vitae. Morbi ultrices enim porttitor massa laoreet sed luctus lacus congue.
Morbi nunc justo, commodo sit amet suscipit in, tincidunt ac eros. Vivamus
condimentum sodales massa, non rutrum neque gravida eu. Ut non ante sit amet
augue egestas bibendum fringilla ut nunc. Aenean porttitor porta interdum.
Vestibulum et velit urna, id scelerisque lacus. Nam scelerisque laoreet sem.
</div>
<?php } ?>
</div>
</body>
</html>