Question

我有一系列隐藏/显示六个不同div的链接。我希望页面加载隐藏所有六个div的位置。单击六个链接中的一个时，相应的div应该淡入。当点击任何其他链接时，当前应该淡出，并且应该出现新选择的div。

以下是我在开始正文标记内放置的jQuery脚本的开头：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $("#1").on('click', function() {
   $(this).fadeOut();
   $("#Graphics, #Jury, #Witness, #Mock, #Continuing").fadeOut();
   $("#Strategy").fadeIn();
});
    </script>

以下是链接：

<a href="#Strategy" id="1">Strategy &amp; Theme Development</a>
    <a href="#Graphics" id="2">Graphics</a>
    <a href="#Jury" id="3">Jury Selection</a>
    <a href="#Witness" id="4">Witness Preparation</a>
    <a href="#Mock" id="5">Mock Trials &amp; Focus Groups</a>
    <a href="#Continuing" id="6">Continuing Legal Education</a>

这些是目标div：

<div id="Strategy"></div>
<div id="Graphics"></div>
<div id="Jury"></div>
<div id="Witness"></div>
<div id="Mock"></div>
<div id="Continuing"></div>

我不确定div的链接是否会覆盖jQuery效果。

Answer 1

我相信你正在寻找这样的东西：

$(document).ready(function() {
    $("a").on('click', function (e) {
        var currentElement = $(e.currentTarget);
        var divToShow = currentElement.attr('href'); // grab the id of the div we need to show
        // now find an visible divs
        var visibleDiv = $('div').filter(function() { return $(this).is(':visible'); });

        if (visibleDiv.length) // if there is a div already visible, fade it out then fade in the target div
        {
            $(visibleDiv).fadeOut(400, function() {
                $(divToShow).fadeIn();
            });
        }
        else $(divToShow).fadeIn(); // fade it in.
    });
});

您已经通过其div属性将a标记的ID与href标记相关联。

我只需在控制淡出a的{{1}}标记中添加一个公共类，然后点击其中任何一个时，抓取其divs属性并淡入淡出在那个div中，同时淡出当前可见的div（如果存在）。

我还为可淡化的href添加了一个公共类，以便您可以在不触及其余DOM的情况下对其进行过滤。

JSFiddle Here

更新：

以下是为元素提供公共类的示例：

对于div代码，请为所有代码添加a类：

hideShow

对于＆＃39; div＆＃39;标签，为所有这些标签添加<a href="#Strategy" id="1" class="hideShow">Strategy & Theme Development</a> <a href="#Graphics" id="2" class="hideShow">Graphics</a> <a href="#Jury" id="3" class="hideShow">Jury Selection</a> etc...类：

hideable

然后在jQuery中：

<div id="Strategy" class="hideable">The strategy div</div>
<div id="Graphics" class="hideable">The Graphics div</div>
<div id="Jury" class="hideable">The Jury div</div>
etc...

Answer 2

您应该选择元素的ID，而不是元素的href值。

$("#1").on('click', function() {
$(this).fadeOut();
$("#2, #3, #4, #5, #6").fadeOut();
$("#1").fadeIn();
});

Answer 3

您可能想尝试单独处理它们：

$("#Graphics,#Jury,#Witness,#Mock,#Continuing").each(function(){ $(this).fadeOut(); });

您可能还想查看.toggle()

jquery hide / show divs故障排除

3 个答案: