selezione tab menù

**Gabstar69** · 15-04-2015, 23:52

Buona sera a tutti,io ho un piccolo problema, vorrei fare un menù ti tab che quando le premi ti apre la tabella e ti mostra il contenuto di questa tab,come in questa immagine:
Allegato 25713
Il problema è che quando vado a premere una tab sopra esempio contact us o qualsiasi altra, mi reindirizza a un'altra pagina html,togliendomi da quella principale,la mia domanda è: è possibile far si che quando viene cliccata una tabella di sopra tra quelle disponibili, si apra direttamente sotto senza cambiarmi pagina e visualizzare il contenuto direttamente solo cambiando tabella e vedere il contenuto di ogni tabella senza cambiare pagina? se riuscite a darmi una mano vi ringrazio infinitamente ci sono sopra da un giorno intero..

**Gabstar69** · 16-04-2015, 00:01

codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><link href="css/styles.css" rel="stylesheet" type="text/css" /></head><style>ul#main-nav li {    float: left;    position: relative;    display: inline;}ul#main-nav li a {    position: relative;    width: 110px;    height: 29px;    display: block;    background-image: url('../images/tabs.png');    background-position: center center;    color: #44403b;    text-decoration: none;    font-size: 14px;    padding-top: 12px;    text-align: left;    padding-left: 30px;    font-weight: bold;}ul#main-nav li.home a {    background-image: url('../images/tab-home.png');}ul#main-nav li.current a {    background-position: top;    color: #ffffff;}ul#main-nav li a:hover {    background-position: bottom;    color: #ffffff;}ul#main-nav li.current a:hover {    background-position: top; /*To Prevent the Current tab from changing colour on hover*/    color: #ffffff;}ul#main-nav li.current {    z-index: 100;}ul#main-nav li.home {    z-index: 100;}ul#main-nav li.portfolio {    z-index: 99;}ul#main-nav li.services {    z-index: 98;}ul#main-nav li.about {    z-index: 97;}ul#main-nav li.contact {    z-index: 96;}ul#main-nav {    margin-left: 20px;}ul#main-nav li {    float: left;    position: relative;    margin-left: -20px;    display: inline;}</style><body>	<div id="page-wrap"><ul id="main-nav">			<li class="current"><a href="index.html">Home</a></li>			<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>			<li class="services"><a href="services.html">Services</a></li>			<li class="about"><a href="about.html">About Us</a></li>			<li class="contact"><a href="contact.html">Contact</a></li>		</ul>		<div class="clear"></div>		<div id="featured">			<div id="image">				<img src="images/sky.jpg" alt="sky"/>			</div>			<div id="featured-content">				<h1>Blue is a wonderful Colour</h1>				<p>					This is how an overlayed tabbed navigation menu looks like. This type of tabbed menus increase the visual appeal of any tabbed menu layouts. Its not that hard to code a menu like this. This is how an overlayed tabbed navigation menu looks like. This type of tabbed menus increase the visual appeal of any tabbed menu layouts. Its not that hard to code a menu like this This is how an overlayed tabbed navigation menu looks like.				</p>			</div>		</div>	</div></body>
</html>

**Vincent.Zeno** · 16-04-2015, 00:18

ciao Gabstar69,
riformatta il codice: così è illeggibile

buon lavoro

**Gabstar69** · 16-04-2015, 00:24

Originariamente inviata da Vincent.Zeno

ciao Gabstar69,
riformatta il codice: così è illeggibile

buon lavoro

chiedo scusa ma quando ho provato a modificarlo mi dice che la pagina non esiste e non me lo alscia fare infatti stavo sclerando, il codice è il seguente:

codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<style>
ul#main-nav li {
    float: left;
    position: relative;
    display: inline;
}
ul#main-nav li a {
    position: relative;
    width: 110px;
    height: 29px;
    display: block;
    background-image: url('../images/tabs.png');
    background-position: center center;
    color: #44403b;
    text-decoration: none;
    font-size: 14px;
    padding-top: 12px;
    text-align: left;
    padding-left: 30px;
    font-weight: bold;
}
ul#main-nav li.home a {
    background-image: url('../images/tab-home.png');
}
ul#main-nav li.current a {
    background-position: top;
    color: #ffffff;
}
ul#main-nav li a:hover {
    background-position: bottom;
    color: #ffffff;
}
ul#main-nav li.current a:hover {
    background-position: top; /*To Prevent the Current tab from changing colour on hover*/
    color: #ffffff;
}
ul#main-nav li.current {
    z-index: 100;
}
ul#main-nav li.home {
    z-index: 100;
}
ul#main-nav li.portfolio {
    z-index: 99;
}
ul#main-nav li.services {
    z-index: 98;
}
ul#main-nav li.about {
    z-index: 97;
}
ul#main-nav li.contact {
    z-index: 96;
}
ul#main-nav {
    margin-left: 20px;
}
ul#main-nav li {
    float: left;
    position: relative;
    margin-left: -20px;
    display: inline;
}
</style>
<body>
	<div id="page-wrap">
<ul id="main-nav">
			<li class="current"><a href="index.html">Home</a></li>
			<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
			<li class="services"><a href="services.html">Services</a></li>
			<li class="about"><a href="about.html">About Us</a></li>
			<li class="contact"><a href="contact.html">Contact</a></li>
		</ul>
		<div class="clear"></div>
		<div id="featured">
			<div id="image">
				<img src="images/sky.jpg" alt="sky"/>
			</div>
			<div id="featured-content">
				<h1>Blue is a wonderful Colour</h1>
				<p>
					This is how an overlayed tabbed navigation menu looks like. This type of tabbed menus increase the visual appeal of any tabbed menu layouts. Its not that hard to code a menu like this. This is how an overlayed tabbed navigation menu looks like. This type of tabbed menus increase the visual appeal of any tabbed menu layouts. Its not that hard to code a menu like this This is how an overlayed tabbed navigation menu looks like.
				</p>
			</div>
		</div>
	</div>
</body>
 </html>

Discussione: selezione tab menù

Strumenti discussione

Ricerca discussione

Visualizza

selezione tab menù

chiedo scusa

Tag per questa discussione

Permessi di invio