Prova questo codice e vedi se è quello che vuoi
codice:
<!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="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#tabs { font-family: Verdana, sans-serif; font-size: 14px; }
#tabs li {
list-style: none;
float: left;
width: 150px;
height: 35px;
margin: 0 5px;
}
#tabs li a {
background-color: #dedede;
color: #222;
font-weight: bold;
text-decoration: none;
width: 150px;
height: 35px;
display: block;
float: left;
line-height: 35px;
text-align: center;
}
#tabs li a:hover,
#tabs li a:active { background-color: #ededed; }
div.content {
color: #222;
font-family: Verdana;
font-size: 12px;
background-color: #efefef;
padding: 25px;
width: 600px;
height: 350px;
line-height: 22px;
}
#container { clear: both; height: 400px; overflow: hidden; }
</style>
</head>
<body>
<ul id="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="container">
<div class="content">
<a name="tab1" id="tab1"></a>
<h2>Tab 1</h2>
<p>Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>
</div>
<div class="content">
<a name="tab2" id="tab2"></a>
<h2>Tab 2</h2>
<p>Convallis elit tortor ut ante libero Aenean Maecenas semper et interdum. Id lorem id dui orci risus volutpat Curabitur Curabitur a urna. Vivamus sit lorem venenatis Nulla semper justo pretium id tincidunt Vestibulum. Vestibulum justo volutpat non.</p>
</div>
<div class="content">
<a name="tab3" id="tab3"></a>
<h2>Tab 3</h2>
<p>Urna justo quam nunc urna sem facilisis nibh Curabitur tellus quis. Orci sem ligula platea parturient justo Morbi id cursus tortor adipiscing. Tortor convallis pede orci Quisque id Nam condimentum sed eu Sed. Cum orci Quisque vitae egestas vitae nulla Cum fermentum egestas ante. Congue eu elit.</p>
</div>
</div>
</body>
</html>
Permessi di invio
Rispondi quotando