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 应该以淡入淡出效果打开
  • 当我单击 javascript 时，“jout” div 应该以淡入淡出效果打开，“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

像这样围绕内容创建一个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");
    });
});

工作小提琴

于 2013-03-12T07:30:56.657 回答
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 回答