单击链接时显示一个 div 而隐藏其他 div答案

【问题标题】：Show one div while hiding others when i click on a link单击链接时显示一个 div 而隐藏其他 div
【发布时间】：2015-01-16 04:10:32
【问题描述】：

我试图弄清楚当我单击导航栏链接时如何取消切换（隐藏）所有其他 div。到目前为止，它会切换 div，但是当我单击新链接时它们会保持活动状态。我希望他们 .slideUp() 和我点击的那个 slideDown 这是我的代码：

<script type="text/javascript">
$(document).ready(function(){

    $(".output .about , .resume").hide();
    $("#about").click(function(e)
    {
        e.preventDefault;
        $(this).find('li').toggleClass('active ');
        $(".about").slideToggle("slow");

    });

    $("#resume").click(function(e)
    {
        e.preventDefault;
        $(this).find('li').toggleClass('active');
        $(".output .resume").slideToggle("slow");

    });
});

    <div class="cont2">
        <ul>
            <a href="#" id="about"><li class="fade-in one " >About</li></a>
            <a href="#" id="resume"><li class="fade-in two">Resume</li></a>
            <a href="#"><li class="fade-in three">Portfolio</li></a>
            <a href="#"><li class="fade-in four">Contact</li></a>
        </ul>
    </div>

    <div class="output">
        <div class="about">
            <p>About</p>
        </div>

        <div class="resume">
            <p>Resume</p>
        </div>
    </div>

编辑：正常工作的代码

$(document).ready(function(){

    $(".cont1").hide();
    $(".cont1").fadeIn(1000);
    $(".output .about , .resume").hide();
    $("#about").click(function(e)
    {
        e.preventDefault();
        $(".cont2 li .active").removeClass('active');

        $(this).find('li').toggleClass('active');
        $(".about").slideToggle("slow");
        $(".resume").slideUp("slow");

    });

    $("#resume").click(function(e)
    {
        e.preventDefault;
        $(this).find('li').toggleClass('active');
        $(".output .resume").slideToggle("slow");

    });
});

【问题讨论】：

这里只是需要考虑的事情 - 您将 LI 标签包装在 A 标签中 -
- 这是不正确的，不会证实。通常，将 A 标签包装在 LI 标签中 -

【解决方案1】：

我认为如果您只为所有链接使用一次点击事件会更好。这样你就不必复制你的代码了。只需使用锚的id 并将其与divs 类（同名）配对。您的 HTML 中已包含此内容，因此您无需更改它。

另一件事是，如果您希望slideUp（隐藏）效果显着，您应该在其回调中运行slideDown（显示）效果。换句话说，您希望在运行另一个动画之前等待一个动画停止。

这是我想出来的：

$(".output .about , .resume").hide();

$("a").click(function (e) {
    e.preventDefault();

    var hiddenDiv = $(".output ." + $(this).attr("id"));
    var visibleDiv = $(".output > div:visible");

    // if all the divs are hidden, just show the desired one
    if (visibleDiv.is(":visible")) {
        visibleDiv.slideUp("slow", function () {
            hiddenDiv.slideDown("slow");
        });
    } else {
        hiddenDiv.slideDown("slow");
    }
});

http://jsfiddle.net/4cvnrh51/

【讨论】：

【解决方案2】：

搜索具有活动类的元素并将其删除：

$(document).ready(function(){

  $(".output .about , .resume").hide();
  $("#about").click(function(e)
  {
    e.preventDefault();
    $(this).find('li').toggleClass('active');
    $(this).siblings().find(".active").removeClass('active');
    $(".about").slideToggle("slow");
    $(".resume, .portfolio, .contact").slideUp("slow");

  });

  $("#resume").click(function(e)
  {
    e.preventDefault();
    $(this).find('li').toggleClass('active');
    $(this).siblings().find(".active").removeClass('active');
    $(".resume").slideToggle("slow");
    $(".about, .portfolio, .contact").slideUp("slow");
  });
});

【讨论】：

这只是删除链接中的 css，但不会切换 div
哎呀。我编辑了答案以向上滑动其他 div。我假设你会给出 Portfolio 和 Contact 相关的名称，所以我在这个假设下填写了选择器。
添加到乔的回答中，您需要像为 li 所做的那样为您的 div 定义一个“活动”类 - 除非它们具有“活动”类 - 在 js 中，否则隐藏 div您将像在 li 上一样打开/关闭 div 的“活动”类。这将导致 div 以您希望的方式隐藏/显示。
@JoeRCasey joe 这行得通，但现在它不切换 li 活动类，例如：当我切换它时，li 比我切换它时突出显示它向上滑动但 li 类不会被删除。
对不起。答案已编辑。尝试#3：P jsbin.com/lowafuyoqu/1/edit?html,css,js,output