0

我有以下jQuery：

    $("#more").click(function(e) {
        e.preventDefault();
        $("#portfolio").slideDown("slow");
    });

    $("#websites").click(function(e) {
        e.preventDefault();
        $("#web").fadeIn("slow");
    });

    $("#applicaties").click(function(e) {
        e.preventDefault();
        $("#apps").fadeIn("slow");
    });

这会淡入，portfolio, web and apps但如果我点击应用程序，并且我想回到网络，它不会再次淡入。

我们的想法是在#portfolio 中的同一位置显示 3 个类别

//编辑//

<div id="portfolio">
    <div class="container">
        <h2>Portfolio</h2><br>


    <ul class="sort">
        <li><a href="#"><p class="button">Alles</p></a></li>
        <li><a href="#web"><p id="websites" class="button">Websites</p></a></li>
        <li><a href="#"><p id="applicaties" class="button">Applicaties</p></a></li>
    </ul>


        <hr>
 <div id="alles" style="background-color:red;">     
        <ul class="port">
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>Application</h4></li>
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>Application</h4></li>
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>Application</h4></li>

            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>Application</h4></li>
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>Application</h4></li>
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>Application</h4></li>
        </uL>
  </div><!--alles-->    

   <div id="web" style="background-color:aqua;">    
        <ul class="port">
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>WAAAA</h4></li>
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>WAAAA</h4></li>
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>WAAAA</h4></li>

            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>Application</h4></li>
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>Application</h4></li>
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>Application</h4></li>
        </uL>
  </div><!--web-->  


     <div id="apps" style="background-color:green;">    
        <ul class="port">
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>WAAAA</h4></li>
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>WAAAA</h4></li>
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>WAAAA</h4></li>

            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>Application</h4></li>
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>Application</h4></li>
            <li><a href="#"><img class="afb" src="img/test.png"/></a><h4>Application</h4></li>
        </uL>
  </div><!--web-->  
    </div><!--container-->  
</div><!--portfolio-->
4

1 回答 1

0

尝试这个：

$("#more").click(function(e) {
    e.preventDefault();
    $('.active').fadeOut('slow').removeClass('active');
    $("#portfolio").addClass('active').slideDown("slow");
});

$("#websites").click(function(e) {
    e.preventDefault();
    $('.active').fadeOut('slow').removeClass('active');
    $("#web").addClass('active').fadeIn("slow");
});

$("#applicaties").click(function(e) {
    e.preventDefault();
    $('.active').fadeOut('slow').removeClass('active');
    $("#apps").addClass('active').fadeIn("slow");
});
于 2013-04-30T11:07:52.070 回答