Tabs für HTML
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
backen
banner
blocken
code
display
erstellen
helfen
http
image
list
paar
passieren
position
reiter
springen
text
type
url
vergessen
-
Ich wollte mir mal ein paar Registerkarten mit HTML erstellen. Jedoch springen sie nicht zum nächsten Reiter, weiß wer was da los ist?
HTML + Java:
<!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 http-equiv="Content-Type" content="text/html;" /> <title>GaWoBot</title> <link href="css/index.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript"> var activetab = 1; function showtab(i){ document.getElementById("tablink"+ activetab).className = tablink; document.getElementById("tabcontent"+ activetab).className = tabcontent; document.getElementById("tablink" + i).className = tablinkactive; document.getElementById("tabcontent" + i).className = tabcontentactive; activetab = i; }; </script> </head> <body> <div id="site"> <div id="banner">Banner</div> <div id="tabbar"> <ul> <li><a href="javascript:showtab(1);" class="tablinkactive" id="tablink1">Home</a></li> <li><a href="javascript:showtab(2);" class="tablink" id="tablink2">News</a></li> <li><a href="javascript:showtab(3);" class="tablink" id="tablink3">about</a></li> </ul> </div> <div id="tabcontent1" class="tabcontentactive">Das ist der erste Content</div> <div id="tabcontent2" class="tabcontent">Das der 2.</div> <div id="tabcontent3" class="tabcontent">Das der 3.</div> </div> </body> </html>
CSS:
@charset "utf-8"; /* CSS Document */ #site{ background-image:url(../img/back.png); position:relative; margin-top:40px; margin-left: 20px; padding-left: 10px; margin-right:20px; } #banner{ } #tabbar ul{ margin:0px; padding:0px; list-style-type:none; } #tabbar li{ margin:0 2px 0 0; list-style-type:none; float: left; } .tablink{ display: block; text-decoration: none; padding: 5px; background: #e8e8e8; border: #dadada solid; border-width: 1px 1px 0 1px; color: #8a8a8a; } .tablinkactive{ display: block; text-decoration: none; padding: 5px; background: #e0e0e0; border: #c0c0c0 solid; border-width: 1px 1px 0 1px; color: #0066ff; } .tabcontent{ display: none; } .tabcontentactive{ display: block; clear: both; background: #f0f0f0; border: 1px #dedede solid; padding: 10px; } #back{ }
Ich hoffe ihr könnt mir helfen
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du hast die Gänsefüßchen vergessen.
document.getElementById("tablink"+ activetab).className = "tablink"; document.getElementById("tabcontent"+ activetab).className = "tabcontent"; document.getElementById("tablink" + i).className = "tablinkactive"; document.getElementById("tabcontent" + i).className = "tabcontentactive"; -
Vielen Dank, jetzt klappt das auch, man so was dummes kann echt nur wieder mir passieren
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
