jQuery - Umschalten zwischen mehreren divs funktioniert nicht

Ich habe hier auf Stackoverflow, Funktion, die zwischen mehreren Divs wechseln sollte gefunden. Ich habe es in JSFiddle versucht und es hat funktioniert. Aber für mich auf der Website funktioniert es nicht. Ich bin wirklich nicht gut in Javascript/jQuery, also werde ich wirklich für jede Hilfe froh sein! Und noch eine Sache - ist es möglich, Link zu setzen, dass ich gerade auf add "aktiv" geklickt habe, dass es unterstrichen hätte oder so, um zu sehen, welcher Abschnitt ausgewählt ist ?? Danke! - FIDDLE HIER: https://jsfiddle.net/vkmw86bp/jQuery - Umschalten zwischen mehreren divs funktioniert nicht

Code ist unten.

HTML:

 <div id="sluzby-nabidka" class="section"> 
     <div class="sluz"><a href="#" data-slide-id="#slidingDiv">div 1</a></div> 
     <div class="sluz"><a href="#" data-slide-id="#slidingDiv_2">div 2</a></div> 
     <div class="sluz"><a href="#" data-slide-id="#slidingDiv_3">div 3</a></div> 
     <div class="sluz"><a href="#" data-slide-id="#slidingDiv_4">div 4</a></div> 
     <div class="sluz"><a href="#" data-slide-id="#slidingDiv_5">div 5</a></div> 


     </div> 



     <div id="text-sluzba" class="section"> 

<div id="slidingDiv" class="slide-div">1</div> 
<div id="slidingDiv_2" class="slide-div" style="display:none;">2</div> 
<div id="slidingDiv_3" class="slide-div" style="display:none;">3</div> 
<div id="slidingDiv_4" class="slide-div" style="display:none;">4</div> 
<div id="slidingDiv_5" class="slide-div" style="display:none;">5</div> 

     </div>

JS:

$.fn.showHide = function (options) { 

    //default vars for the plugin 
    var defaults = { 
     speed: 1000, 
     easing: '', 
     changeText: 0, 
     showText: 'Show', 
     hideText: 'Hide', 
     slideDiv: '.slide-div' 
    }; 
    var options = $.extend(defaults, options); 

    return this.each(function() { 
     $(this).click(function() { 
      $(options.slideDiv).hide(); 
      // this var stores which button you've clicked 
      var toggleClick = $(this), 
       toggleDiv = $(this).data('slide-id'); 
      // here we toggle show/hide the correct div at the right speed and using which easing effect 
      $(toggleDiv).fadeToggle(options.speed, options.easing, function() { 
       // this only fires once the animation is completed 
       // if(options.changeText==0){ 
       //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText); 
       //} 

      }); 


     }); 

    }); 

}; 

$('a').showHide({'slideDiv' : '.slide-div'});

Quelle

2016-04-06 H Sturma

Was ist der Fehler Sie erhalten ? Haben Sie das Konsolenprotokoll (F12) überprüft? –

Da ich noch nicht genug Ruf haben einen Kommentar hinzufügen, ich werde auf die Frage sprechen und dann um weitere Informationen zu fragen, Falls benötigt.

Wenn ich Ihr JSFiddle geladen habe, funktionierte es nicht, weil eine JQuery-Bibliothek nicht in der Geige selbst enthalten war. Sobald ich die Frameworks & Erweiterungen Auswahl auf beliebige JQuery-Bibliothek wechselte, traf ich Run und es hat funktioniert. Das bedeutet IMO, dass sich Ihr JQuery-Import entweder an der falschen Stelle im HTML-DOM befindet oder Sie nicht darauf warten, dass das DOM bereit ist, bevor Sie den von Ihnen bereitgestellten Code verwenden. Som Beispiele:

<html> 
    <head> 
     <title> 
     </title> 
     <!-- normally, JQuery script gets added here --> 
     <script type="javascript" src="path/to/jquery.js"></script> 
    </head> 
    <body> 

<!-- then, import the above code here, either as a separate JS file or inside some <script></script> tags --> 
     <script type="javascript" src="path/to/showHide.js"></script> 
    </body> 
</html>

Außerdem sollten Sie den Code wickeln Sie mit:

$(document).ready(function() { 
    // Your code here 
});

Dadurch wird sichergestellt, dass die JQuery-Code nicht ausgeführt, bis das DOM geladen wird. Es scheint mir, dass Ihr Code vor dem DOM ausgeführt ist bereit, so dass die Lookup keine Anker-Tags ist das Finden der showhide Funktionalität zu befestigen, wenn Sie diesen Anruf:

$('a').showHide({'slideDiv' : '.slide-div'});

Quelle

2016-04-06 12:30:19

Ich hatte jQuery lib in meiner Website-Datei enthalten, wenn ich '$ (document) .ready (function() {' es hat zu arbeiten begonnen! Danke! Und übrigens, würden Sie wissen, wie man Klasse "aktiv "zu dem Link, den ich gerade angeklickt habe? –

Ich habe einige Skript-Tags hinzugefügt, um das, worüber ich rede, offensichtlicher zu machen :) –

innerhalb der $ (this) .click (function() {}); code, place $ ('a'). removeClass ('active'); $ (this) .addClass ('active'); Dadurch wird die aktive Klasse von allen Anker-Tags entfernt und dann zum aktuell angeklickten Anker-Tag hinzugefügt. –

jQuery - Umschalten zwischen mehreren divs funktioniert nicht

Antwort

Verwandte Themen