Отключить действие ссылки, если DIV виден (jQuery - toggle)

Question

Я использую следующее для переключения между 3 различными div в зависимости от того, какая ссылка нажата.

Отъезд DEMO скрипка.

В основном, Link1 показывает DIV1, Link2 показывает DIV2 & Ссылка 3 показывает DIV3.

Проблемы я имею это:

Если пользователь нажимает на ссылку для текущего DIV, когда уже видно, он удаляет текущий DIV и ничего не показывает. Я бы хотел, чтобы он ничего не делал.

Я знаю логику, необходимую для ее работы (если «этот» div виден - ничего не делать), но я понятия не имею, как его кодировать.

Любая помощь была бы очень признательна.

JQuery:

CSS:

.targetSched {display: none} 
    .targetSched.first {display: block} 

HTML:

<a class="viewSchedule" target="1"><span class="viewBTN">WEEKLY</span></a> 
<a class="viewSchedule" target="2"><span class="viewBTN">DAILY</span></a> 
<a class="viewSchedule" target="3"><span class="viewBTN">LIST</span></a> 


<div id="sh-week" class="targetSched first">WEEKLY CONTENT</div> 
<div id="sh-daily" class="targetSched">DAILY CONTENT</div> 
<div id="sh-list" class="targetSched">LIST CONTENT</div> 

Answer 1

Working Demo

Yo u также уменьшали текущий div. Просто измените fadeToggle() на fadeIn(), так как fadeToggle() скрывает ваш элемент, если он виден в данный момент.

Заканчивать следующий фрагмент кода,

jQuery('.viewSchedule').click(function() { 
    var index = $(this).index(), 
    newTarget = jQuery('.targetSched').eq(index); 
    jQuery('.targetSched').not(newTarget).fadeOut('fast') 

    newTarget.delay('fast').fadeIn('fast')  //change this line 
    return false; 
}) 

Answer 2

Просто замените код ниже:

newTarget.delay('fast').fadeToggle('fast'); 

с этим:

newTarget.delay('fast').fadeIn('fast'); 

Этот вопрос fadeToggle переключает состояние отображения элемент. Итак, если элемент уже виден, он будет скрывать его на 2-м клике и показывать снова при следующем нажатии и т. Д.

Answer 3

Проверьте свойство отображения, а затем выполните fadeToggle.

jQuery('.viewSchedule').click(function() { 
    var index = $(this).index(), 
    newTarget = jQuery('.targetSched').eq(index); 
if(newTarget.css("display") != "block"){ jQuery('.targetSched').not(newTarget).fadeOut('fast') 
    newTarget.delay('fast').fadeToggle('fast') 
             } 
    return false; 
}) 

DEMO