0 
<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を非表示/閉じるコードを取得できませんでした。誰でも助けることができますか？

4

3 に答える 3

1

この例を参照してください

$(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>
于 2013-03-12T07:56:17.003 に答える
0

この行で試すことができます：

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

このフィドルをチェックアウト

于 2013-03-12T07:43:43.003 に答える
0

そのようにコンテンツの周りにdivを作成します

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

それが一般的になり、 を$(".hout").hide()クリックするときのように、特定の div を呼び出して何度も非表示にする必要がないようにし.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");
    });
});

ワーキングフィドル

于 2013-03-12T07:30:56.657 に答える