Wer kann erklären was hier passiert ??

[m-ortloff]

/* MENUE */
$("ul.menue li a").click(function() {
$("ul.menue li a.current").removeClass("current");
$(".tabContent").stop().fadeOut(250);
$(this).toggleClass("current");

 

[threadi]

Das ist doch nicht alles? Da fehlt eine } am Ende?

Übersetzt heißt es aber soviel wie:
Binde an alle Link innerhalb einer ul-Liste mit der Klasse "menue" eine Funktion die beim Anklicken des Links ausgeführt werden soll. Diese Funktion soll bei dem Link die Klasse "current" entfernen, wenn "current" vorhanden ist.
Dann soll sie Elemente mit der Klasse "tabContent" in 250 Millisekunden ausblenden.
Dann soll sie die Klasse "current" wieder setzen.

 

[m-ortloff]

$("ul.menue li a").click(function() {
$("ul.menue li a.current").removeClass("current");
$(".tabContent").stop().fadeOut(250);
$(this).toggleClass("current");
$(".tabContent#" + $(this).attr("id") ).stop().delay(500).fadeIn(250);
});
Tut mir leid das ist der komplette code

 

[threadi]

Dann kommt noch eine Zeilenanalyse dazu:
Nach dem o.g. werden auch noch alle Elemente innerhalb von Elementen mit der Klasse tabContent nach einer Pause von 500 Millisekunden in 250 Millisekunden wieder eingeblendet.

Auch wenn ich jQuery (worauf diese Codes basieren) kaum nutze, hoffe ich doch richtig zu liegen ;)

Und verwende bitte Code-Tags wenn Du wieder Quellcode im Forum zeigst.

 

[m-ortloff]

Zuletzt die Frage ich habe zwei Pfeile die ebenfalls die einzelnen Solides wechseln.
Gibt es eine Funktion mit der ich in code vereinfachen kann ?

/* PFEILE_NAV*/
    $(".button_vor").click(function() {
                                
                         
            var idName = $("ul.menue_fahrzeuge li a.current").attr('id');     
            switch(idName){
            
                case"slide_1": $("ul.menue_fahrzeuge li a.current").removeClass("current");
                                $(".tabFahrzeugeContent").stop().fadeOut(250);
                                $('ul.menue_fahrzeuge li a').each(function() {
                                if($(this).attr('id') == 'slide_2'){
                                    $(this).addClass("current");  
                                    $(".tabFahrzeugeContent#slide_2" ).stop().delay(500).fadeIn(250);
                                    }});break;


                case"slide_2": $("ul.menue_fahrzeuge li a.current").removeClass("current");
                                $(".tabFahrzeugeContent").stop().fadeOut(250);
                                $('ul.menue_fahrzeuge li a').each(function() {
                                if($(this).attr('id') == 'slide_3'){
                                    $(this).addClass("current");  
                                    $(".tabFahrzeugeContent#slide_3" ).stop().delay(500).fadeIn(250);
                                    }});break;
            
             case"slide_3": $("ul.menue_fahrzeuge li a.current").removeClass("current");
                                $(".tabFahrzeugeContent").stop().fadeOut(250);
                                $('ul.menue_fahrzeuge li a').each(function() {
                                if($(this).attr('id') == 'slide_4'){
                                    $(this).addClass("current");  
                                    $(".tabFahrzeugeContent#slide_4" ).stop().delay(500).fadeIn(250);
                                    }});break;      
                
             case"slide_4": $("ul.menue_fahrzeuge li a.current").removeClass("current");
                                $(".tabFahrzeugeContent").stop().fadeOut(250);
                                $('ul.menue_fahrzeuge li a').each(function() {
                                if($(this).attr('id') == 'slide_5'){
                                    $(this).addClass("current");  
                                    $(".tabFahrzeugeContent#slide_5" ).stop().delay(500).fadeIn(250);
                                    }});break;    
                                     
            case"slide_5": $("ul.menue_fahrzeuge li a.current").removeClass("current");
                                $(".tabFahrzeugeContent").stop().fadeOut(250);
                                $('ul.menue_fahrzeuge li a').each(function() {
                                if($(this).attr('id') == 'slide_6'){
                                    $(this).addClass("current");  
                                    $(".tabFahrzeugeContent#slide_6" ).stop().delay(500).fadeIn(250);
                                    }});break;
                                    
            case"slide_6": $("ul.menue_fahrzeuge li a.current").removeClass("current");
                                $(".tabFahrzeugeContent").stop().fadeOut(250);
                                $('ul.menue_fahrzeuge li a').each(function() {
                                if($(this).attr('id') == 'slide_7'){
                                    $(this).addClass("current");  
                                    $(".tabFahrzeugeContent#slide_7" ).stop().delay(500).fadeIn(250);
                                    }});break;                        
                                    
            case"slide_7": $("ul.menue_fahrzeuge li a.current").removeClass("current");
                                $(".tabFahrzeugeContent").stop().fadeOut(250);
                                $('ul.menue_fahrzeuge li a').each(function() {
                                if($(this).attr('id') == 'slide_1'){
                                    $(this).addClass("current");  
                                    $(".tabFahrzeugeContent#slide_1" ).stop().delay(500).fadeIn(250);
                                    }});break;                            
                                    
            }
    
         });

 

[Tronjer]

Schreibe slide_1, slide_2, etc. innerhalb des HTML in das Data-Attribut und rufe die Funktion dann mit dem Wert des data-Attributs als Parameter auf. Dann kannst du dir alle Redundanzen und das switch-case sparen.

 

[m-ortloff]

Tut mir leid aber ich weiß leider nicht wie ich das machen soll, da ich noch nie das Data-Attribut benutzt habe ...

 

[Tronjer]

Das data-Attribut von HTML ist ein custom-Attribut, indem sich beliebige Werte speichern lassen.

Syntax:

<div data-foo="bar" id="irgendwas">..</div>

Darin kann man z.B. Dinge ablegen, die JS-Funktionen als Parameter übergeben werden sollen:

var arg = $('#foobar').attr('data-foo');

function eineFunktion(arg) {
  // tu was mit arg
}

In deiner Funktion sind 90% des Codes redundant. Die einzelnen switch-cases unterscheiden sich lediglich durch die letzte Ziffer. Das kann man alles durch Variablen ersetzen.