Question

我有以下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类别

// // EDIT

<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-->

Answer 1

试试这个：

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

Jquery切换而不是淡出？

1 个答案: