Question

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

查看此DEMO小提琴。

基本上，Link1显示DIV1，Link2显示DIV2＆amp;链接3显示DIV3。

我遇到的问题是：

如果用户在可见的情况下单击当前DIV的链接，它将删除当前的DIV并且不显示任何内容。我不喜欢这样做。

我知道使其工作所需的逻辑（如果＆＃39; 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()隐藏了您当前可见的元素。

查看以下代码段

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

检查display属性，然后执行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

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

3 个答案: