Question

我在页面顶部有4个div和一个导航栏。我想点击顶部的一个链接，让它使当前div消失（淡入淡入）到新的div中，以创建一个过渡效果而无需在我的页面上滚动。

Navbar代码如下所示：

<div id="portfolio-container" class="contain">
<h1>PORTFOLIO</h1>

div看起来像这样：

<div id="about-container" class="contain">
<h1>ABOUT</h1>

<div id="contact-container" class="contain">
<h1>CONTACT</h1>

$(document).ready(function ()
{
    $('#portfolio-container').hide();
    $('#contact-container').hide();
    $('#about-container').hide();

    $('#portfolio').click(function ()
    {
        if ($('.contain').is(":visible")){
            $('.contain').hide();
        }

        $('#portfolio-container').show();
        $('#portfolio-container').fadeIn();
    });

    $('#about').click(function ()
    {
        if ($('.contain').is(":visible")){
            $('.contain').hide();
        }

        $('#about-container').show();
        $('#about-container').fadeIn();
    })
});

我一直在尝试以下不完整的jquery片段，但它似乎无法正常工作：

<Directory /home/sakyun/sites/> (Being my file directory that i changed)
    Options Indexes FollowSymLinks
    AllowOverride All (So that my .htaccess file is read)
    Require all granted
</Directory>

请帮助我！

Answer 1

我所做的就是关闭PORTOFOLIO和ABOUT的<div id="portfolio-container" class="contain"> <h1>PORTFOLIO</h1> </div> <div id="about-container" class="contain"> <h1>ABOUT</h1> </div> div，它们似乎有效。 JSFiddle：https://jsfiddle.net/k96dLrbu/

{{1}}

Answer 2

桑迪试试这个。我希望你对此有所帮助 jsfindle example here

像这样的HTML代码

<div class="container">
     <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
             <li class="nav-item active">
            <a class="nav-link" id="home" href="#">HOME</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="portfolio" href="#">PORTFOLIO</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="about" href="#">ABOUT</a>
        </li>

        </ul>
</div> 
    <div class="page-body">
    <div id="portfolio-container" class="contain-show">
        <h1>PORTFOLIO</h1>       
    </div>

    <div id="about-container" class="contain-hide">
        <h1>ABOUT</h1> 
    </div>

    </div>    
</div>

像这样的java脚本代码

$(document).ready(function (){   
    $('#portfolio').click(function ()
    {  
        $( ".contain-show" ).fadeOut( "slow", function(e) {       
                $(this).removeClass('contain-show').addClass('contain-hide');          
            $( "#portfolio-container" ).fadeIn( "slow", function(e) {
                $(this).removeClass('contain-show').addClass('contain-show');          
            });
        });          
    });

    $('#about').click(function ()
    {        
       $( ".contain-show" ).fadeOut( "slow", function(e) {
          $(this).removeClass('contain-show').addClass('contain-hide');          
          $( "#about-container" ).fadeIn( "slow", function(e) {
               $(this).removeClass('contain-show').addClass('contain-show');          
          });   
       });    
    });
});

像这样的css

#portfolio-container{
  background-color:green;
}

#about-container{
  background-color:red;
}

.collapse {
      display: block; 
}

.container{
  background-color:#92c7ff;
}

#navbar{
 background-color: #e7e7e7
}
.contain-show{
   display: block;
}

.contain-hide{
   display: none;
}

Jquery fadein一个div并淡出显示的div

2 个答案: