jQuery - переключиться между несколькими divs не работает

Я нашел здесь, на Stackoverflow, функцию, которая должна переключаться между несколькими div. Я попробовал это в JSFiddle, и это сработало. Но для меня, на веб-сайте, это не работает. Я действительно плохо разбираюсь в javascript/jQuery, поэтому буду очень рад за любую помощь! И еще одна вещь - можно ли установить ссылку, что я просто нажал на добавление класса «active», что бы было подчеркнуто или что-то еще, чтобы увидеть, какой раздел выбран? Спасибо! - FIDDLE ЗДЕСЬ: https://jsfiddle.net/vkmw86bp/jQuery - переключиться между несколькими divs не работает

Код ниже.

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'});

источник

2016-04-06 H Sturma

Что такое ошибки вы получаете ? Вы проверили журнал консоли (F12)? –

Так как я не хватает репутации еще добавить комментарий, я буду говорить к этому вопросу, а затем запросить дополнительную информацию, если необходимо.

Когда я загрузил ваш JSFiddle, это не сработало, потому что библиотека JQuery не была включена в скрипт. Как только я включил Frameworks & Расширения выбора до any Библиотека JQuery, я нажал Run, и это сработало. Таким образом, это, IMO, означает, что ваш импорт JQuery либо находится в неправильном месте в HTML DOM, либо вы не ожидаете, что DOM будет готов, прежде чем нажать код, который вы предоставили. Сом примеры:

<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>

Кроме того, вы должны обернуть код снабженное:

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

Это будет гарантировать, что код JQuery не выполняется, пока не будет загружен DOM. Мне кажется, что ваш код работает до DOM готова, поэтому поиск не находит каких-либо анкерные теги прикрепить функциональность ПоказатьСкрыть к, когда вы делаете этот призыв:

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

источник

2016-04-06 12:30:19

У меня был jQuery lib, включенный в файл моего сайта, когда я добавил '$ (document) .ready (function() {' он начал работать! Спасибо! И btw, вы знаете, как добавить класс "active "к ссылке, на которую я только что нажал? –

Я добавил несколько тегов скриптов, чтобы сделать то, что я говорю о более очевидном :) –

внутри $ (this) .click (function() {}); код, поместите $ ('a'). removeClass ('active'); $ (Это) .addClass ('активный'); Это приведет к удалению активного класса из всех привязанных тегов, а затем добавит активную ссылку на текущий якорный тег –

jQuery - переключиться между несколькими divs не работает

ответ

Смежные вопросы