hallo ich hab ein problem, habe ein
[h=2]jQuery Tabbed-Menü: erstellt,[size=12][FONT=arial][/FONT][/SIZE][/h]jedoch schein was im Code falsch zu sein.
Im Editor ==> Kopfbereich
<style type="text/css"><!--
#teaser { [COLOR=brown]width:[/COLOR] 400px; overflow: hidden; } #teaser ul { [COLOR=brown]width:[/COLOR] 400px; list-style-type: none; padding: 0px; margin: 0px; } #teaser ul.menu li { float: left; margin-right: 5px; margin-bottom: -1px; } [COLOR=green]/* Menu-Buttons oben */[/COLOR] #teaser ul.menu li { font-weight: bold; display: block; padding: 5px 10px 5px 10px; background-color: #efefef; margin-bottom: -1px; border: 1px solid #d0ccc9; color: #898989; cursor: pointer; } #teaser ul.menu li.active { background: #fff; top: 1px; border-bottom: 0; color: #5f95ef; } #teaser ul.menu li:hover { color: #202020; background-color:#ddd; } /******* INHALT *******/ .inhalt { [COLOR=navy]font-size:[/COLOR] 11px; [COLOR=navy]color:[/COLOR] #000000; [COLOR=navy]background-color:[/COLOR] #FFFFFF; [COLOR=navy]border:[/COLOR] 1px solid #d0CCC9; margin: 0pt auto; text-align: left; padding: 20px 10px 20px 10px; } [COLOR=green]/* Ueberschriften im Inhalt */[/COLOR] .inhalt h2 { [COLOR=navy]font-size:[/COLOR] 14px; [COLOR=navy]font-family:[/COLOR] arial; [COLOR=navy]color:[/COLOR] #343434; margin-bottom: 10px; } .inhalt.news_1 { display: block; } .inhalt.news_2 { display: none; } .inhalt.news_3 { display: none; }
--></style>
[size=18]
[/SIZE]Und auf der Home Seite der Code:::
<script type="text/javascript" src="[COLOR=blue]http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js[/COLOR]"></script> <script type="text/javascript"> $(document).ready(function(){ $(".menu > li").click(function(e){ switch(e.target.id){ case "news_1": //change status & style menu $("[COLOR=brown]#news_1[/COLOR]").addClass("active"); $("[COLOR=brown]#news_2[/COLOR]").removeClass("active"); $("[COLOR=brown]#news_3[/COLOR]").removeClass("active"); $("div.[COLOR=navy]news_1[/COLOR]").fadeIn(); $("div.[COLOR=navy]news_2[/COLOR]").css("display", "none"); $("div.[COLOR=navy]news_3[/COLOR]").css("display", "none"); break; case "news_2": $("[COLOR=brown]#news_1[/COLOR]").removeClass("active"); $("[COLOR=brown]#news_2[/COLOR]").addClass("active"); $("[COLOR=brown]#news_3[/COLOR]").removeClass("active"); $("div.[COLOR=navy]news_2[/COLOR]").fadeIn(); $("div.[COLOR=navy]news_1[/COLOR]").css("display", "none"); $("div.[COLOR=navy]news_3[/COLOR]").css("display", "none"); break; case "news_3": $("[COLOR=brown]#news_1[/COLOR]").removeClass("active"); $("[COLOR=brown]#news_2[/COLOR]").removeClass("active"); $("[COLOR=brown]#news_3[/COLOR]").addClass("active"); $("div.[COLOR=navy]news_3[/COLOR]").fadeIn(); $("div.[COLOR=navy]news_1[/COLOR]").css("display", "none"); $("div.[COLOR=navy]news_2[/COLOR]").css("display", "none"); break; } //alert(e.target.id); return false; }); }); //@Author: Adrian "yEnS" Mato Gondelle & Ivan Guardado Castro // Website: http://www.yensdesign.com //@email: yensamg@gmail.com //@license: Feel free to use it </script>
<div id="teaser"> <ul class="menu"> <li id="news_1" class="active">[COLOR=brown]Titel 1[/COLOR]</li> <li id="news_2">[COLOR=brown]Titel 2[/COLOR]</li> <li id="news_3">[COLOR=brown]Titel 3[/COLOR]</li> </ul> <br style="clear: left;" /> <div class="inhalt news_1"> <h2>[COLOR=chocolate]Überschrift 1[/COLOR]</h2> [COLOR=navy]Hier dein Text hinein[/COLOR] </div> <div class="inhalt news_2"> <h2>[COLOR=chocolate]Überschrift 2[/COLOR]</h2> [COLOR=navy]Hier dein Text hinein[/COLOR] </div> <div class="inhalt news_3"> <h2>[COLOR=chocolate]Überschrift 3[/COLOR]</h2> [COLOR=navy]Hier dein Text hinein[/COLOR] </div> </div>
Was ist an diesem Code falsch???