如果 DIV 可见，则禁用链接操作（jQuery - 切换）

Question

我正在使用以下内容在 3 个不同的 div 之间切换，具体取决于单击的链接。

看看这个DEMO小提琴。

基本上，Link1 显示 DIV1，Link2 显示 DIV2，Link 3 显示 DIV3。

我遇到的问题是这样的：

如果用户在当前 DIV 已经可见时单击它的链接，它会删除当前 DIV 并且不显示任何内容。我希望它什么都不做。

我知道使它工作所需的逻辑（如果'this' div 是可见的 - 什么都不做），但我不知道如何编码。

任何帮助将不胜感激。

jQuery :

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

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

你也在淡出当前的 div。只需将fadeToggle() 更改为fadeIn()，因为fadeToggle() 会隐藏当前可见的元素。

看看下面的sn-p，

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 切换元素的显示状态。因此，如果该元素已经可见，它将在第二次单击时将其隐藏，并在下次单击时再次显示，依此类推..

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