jquery 隐藏/显示 div 疑难解答

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

您已经将要淡入淡出的divs 的ID 通过其href 属性链接到a 标签。

我只需在a 标记中添加一个通用类来控制divs 的淡入淡出，然后当点击其中任何一个时，抓住它的href 属性并淡入该div，同时淡出当前可见的 div（如果存在）。

我还将向可褪色的divs 添加一个通用类，这样您就可以在不触及 DOM 的其余部分的情况下过滤它们。

JSFiddle Here

更新：

以下是为元素提供通用类的示例：

对于a 标签，将hideShow 类添加到所有标签：

<a href="#Strategy" id="1" class="hideShow">Strategy &amp; Theme Development</a>
<a href="#Graphics" id="2" class="hideShow">Graphics</a>
<a href="#Jury" id="3" class="hideShow">Jury Selection</a>
etc...

对于“div”标签，将hideable类添加到所有标签中：

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

然后在jQuery中：

$(document).ready(function() {
    $(".hideShow").on('click', function (e) {
        // you clicked one of the `.hideShow` a tags!
        ....
        // now filter through all the divs with `class="hideable"` to find a visible one
        var visibleDiv = $('.hideable').filter(function() { return $(this).is(':visible'); });
    });
});

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