kostenloser Webspace werbefrei: lima-city


Tabs für HTML

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    gauss-design

    Kostenloser Webspace von gauss-design

    gauss-design hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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";
  4. Autor dieses Themas

    gauss-design

    Kostenloser Webspace von gauss-design

    gauss-design hat kostenlosen Webspace.

    Vielen Dank, jetzt klappt das auch, man so was dummes kann echt nur wieder mir passieren :biggrin:
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!