Question

<html>
<head>
    <script type="text/javascript" src="jquerynew.js"></script>  
    <script type="text/javascript">
        $(document).ready(function() {
            $(".home").click(function(event) {
                $(".hout").slideToggle("slow");     
            });
            $(".javascript").click(function(event) {
                $(".jout").slideToggle("slow");
            }); 
        });
    </script>

    <style>
        .menu { margin:0px auto; border:1px solid lightgray; height:30px; width:1000px;background:#FFF;} 
         #page-content { margin:0px auto; width:1000px; border:1px solid green; margin-top:4px; background:#FFF; overflow:auto; height:500px; }
        .home {padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;}
        .javascript { padding-left:19px; padding-right:29px; padding-top:2px; float:left; border-right:1px solid lightgray;  }
        .jout { display:none; padding:20px; }
        .hout { display:none; padding:20px; }
    </style>
</head>

<body>
    <div class="menu">
        <div class="home">Home</div>
        <div class="javascript">Javascript</div>
        <div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">jQuery</div>
        <div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">AJAX</div>
        <div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">jQuery + PHP</div>
        <div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">AJAX+ PHP</div>
        <div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">jQuery + AJAX + PHP</div>    
    </div>  

    <div class="hout"> Home Content goes here</div>
    <div class="jout"> Javascript Content goes here</div>
</body>
</html>

我有家| Javascript | jQuery | AJAX等，

我需要我的代码像：

当我点击主页时，“hout”div应该以fadeIn效果打开
当我点击javascript时，“jout”div应该以fadeIn效果打开并且“hout”div应该关闭。
当我点击jQuery时，打开“jqout”div并关闭之前打开的div。

我无法获取隐藏/关闭之前打开的div的代码。有人可以帮忙吗？

Answer 1

参见 this example

$(document).ready(function () {
    $(".menu div").click(function (event) {
        $(this).parent().siblings(':not([class$=' + this.className + '])').slideUp("slow");
        $(this).parent().siblings('[class$=' + this.className + ']').slideDown("slow");
    });
});

和HTML：

<div class="menu">
    <div class="home">Home</div>
    <div class="javascript">Javascript</div>
    <div class="jquery" style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">jQuery</div>
    <div class="ajax" style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">AJAX</div>
    <div class="jqphp" style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">jQuery + PHP</div>
    <div class="ajphp" style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">AJAX+ PHP</div>
    <div class="japhp" style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">jQuery + AJAX + PHP</div>
</div>
<div class="a hout-home">Home Content goes here</div>
<div class="a jout-javascript">Javascript Content goes here</div>
<div class="a jout-jquery">jQuery Content goes here</div>
<div class="a jout-ajax">AJAX Content goes here</div>
<div class="a jout-jqphp">jQuery + PHP Content goes here</div>
<div class="a jout-ajphp">AJAX+ PHP Content goes here</div>
<div class="a jout-japhp">jQuery + AJAX + PHP Content goes here</div>

Answer 2

围绕内容创建一个div，如此

<div id="content">
    <div class="hout"> Home Content goes here</div>
    <div class="jout"> Javascript Content goes here</div>
</div>

因此它变得通用，您不必再次调用特定div来隐藏，例如$(".hout").hide()点击.javascript时。即使您添加其他内容而不必专门告诉特定div隐藏，这也会有效。

和jQuery

$(document).ready(function()
{
    $('#content').children().hide(); 

    $(".home").click(function(event)
    {
        $('#content').children().not('.hout').hide();  
        //children() will get all the div inside content ... .not('.hout') will exculde the `div` which you have to slideToggle.. so that it won't hide.. and slideToggle works as it should
        $(".hout").slideToggle("slow");      
    });

    $(".javascript").click(function(event)
    {
        $('#content').children().not('.jout').hide(); 
        $(".jout").slideToggle("slow");
    });
});

working fiddle

Answer 3

您可以尝试使用此行：

$(this).parent().siblings().fadeOut(); // <----hides .hout .jout etc

所以你的代码应该是这样的：

$('.home').click(function () {
    $(this).parent().siblings().fadeOut();
    $('.hout').fadeIn();
});

$('.javascript').click(function () {
    $(this).parent().siblings().fadeOut();
    $('.jout').fadeIn();
});

Div的打开/关闭与FadeIn效果

3 个答案:

CHECKOUT THIS FIDDLE