Javascript jquery隐藏/显示divs疑难解答

我有一系列链接来隐藏/显示六个不同的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>

$（“#1”）。在（'click'，function（）上{
$（this.fadeOut（）；
$（“#图形，#陪审团，#证人，#模拟，#继续”）.fadeOut（）；
$（“#策略”）.fadeIn（）；
});

以下是链接：

<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 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效果。

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

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

---

您可能希望尝试单独对其执行操作：

$（“#图形，#陪审团，#证人，#模拟，#继续”）。每个（函数（）{
$（this.fadeOut（）；
});

您可能还想看看
我相信您正在寻找这样的产品：

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

您已经有了要通过
href
属性淡入链接到
a
标记的
div
的ID

我只需在控制淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入

我还向可淡入淡出的
div
s添加了一个公共类，这样您就可以在不接触DOM其余部分的情况下过滤它们


更新：

下面是一个为元素提供公共类的示例：

对于
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 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'); });
    });
});

不，这些是链接ID（#1-#6），我试图显示/隐藏的div ID是#策略、#图形等。为了避免混淆，您应该包括
div
元素的代码。好的，我添加了目标div。很抱歉。如果div最初是隐藏的，为什么要淡出？我的目标是在点击第二个链接后淡出它们。目前我没有隐藏div，只是想解决一些问题。谢谢，我会尝试一下。关于分配公共类，你能给我举个例子吗？由于不太擅长编写脚本，我在思考如何使用脚本时遇到了困难。@JoeO'Toole在我的帖子中看到了更新。希望能有帮助。非常感谢。我来试试。这个效果很好！后续问题：如何在页面加载时隐藏所有这些div？