HTML Datei

Text1

Hier steht dann der
Inhalt!

Text2

Hier steht dann der
Inhalt!

Text3

Hier steht dann der
Inhalt!

_________________________________________________________________________________ CSS Datei (general.css) @CHARSET "UTF-8"; .clear{ clear: both; height: 0; visibility: hidden; display: block; } /* Die Breite */ #tabmenue { width:400px; } #tabmenue ul{ list-style: none; list-style-position: outside; } /*Richtungs√∂ffnung Tabmenue */ #tabmenue ul.menu li{ float: left; margin-right: 2px; margin-bottom: -1px; } #tabmenue ul.menu li{ font-weight: 600; display: block; padding: 5px 10px 5px 10px; background: #efefef; margin-bottom: -1px; border: 1px solid #d0ccc9; border-width: 1px 1px 1px 1px; position: relative; color: #898989; cursor: pointer; } #tabmenue ul.menu li.active{ background: #fff; top: 1px; border-bottom: 0; color: #5f95ef; } /******* sichbarkeit Tabs beim Laden der Seite*******/ .tabmenue.tab1{ display: block; } .tabmenue.tab2{ display: none; } .tabmenue.tab3{ display: none; } /******* Inhalt vom Tab Design *******/ /* .tabmenue.tab1 h1{ } .tabmenue.tab1{ } */ __________________________________________________________________________ Jquerry Datei (tab.js) /***************************/ //@Author: Adrian "yEnS" Mato Gondelle & Ivan Guardado Castro //@website: www.yensdesign.com //@email: yensamg@gmail.com //@license: Feel free to use it, but keep this credits please! //@√?berarbeitet Verallgemeinert //@webseite: www.seopart.de /***************************/ $(document).ready(function(){ $(".menu > li").click(function(e){ switch(e.target.id){ case "tab1": //change status & style menu $("#tab1").addClass("active"); $("#tab2").removeClass("active"); $("#tab3").removeClass("active"); //display selected division, hide others $("div.tab1").fadeIn(); $("div.tab2").css("display", "none"); $("div.tab3").css("display", "none"); break; case "tab2": //change status & style menu $("#tab1").removeClass("active"); $("#tab2").addClass("active"); $("#tab3").removeClass("active"); //display selected division, hide others $("div.tab2").fadeIn(); $("div.tab1").css("display", "none"); $("div.tab3").css("display", "none"); break; case "tab3": //change status & style menu $("#tab1").removeClass("active"); $("#tab2").removeClass("active"); $("#tab3").addClass("active"); //display selected division, hide others $("div.tab3").fadeIn(); $("div.tab1").css("display", "none"); $("div.tab2").css("display", "none"); break; } //alert(e.target.id); return false; }); });