Question

这是我第一次使用stackoverflow，所以我走了。

我正在创建一个网站，目前，我已经创建了导航按钮。默认情况下（主页）显示使用JavaScript的幻灯片，这都包含在div中。

当我点击时，让我们说'关于我'页面，我希望该div淡出，另一个div淡入淡出，其中包含图像和文字。

这是我的代码：

<body>
    <div id="top_wrapper">
        <a class="button navigation" id="homeBtn">Home</a>
        <a class="button navigation" id="aboutBtn">About Me</a>
        <a class="button navigation" id="coachBtn">Peronsal, Business and Professional Coaching</a>
        <a class="button navigation" id="successBtn">Success Stories</a>
        <a class="button navigation" id="workBtn">Community Work</a>
        <a class="button navigation" id="charityBtn">Charity</a>
        <a class="button navigation" id="contactBtn">Contact Me</a>
    </div>
    <div id="home">
        <div id="sliderFrame">
            <div id="slider">
                <img src="_images/_image01.jpg" />
                <img src="_images/_image02.jpg" />
                <img src="_images/_image03.jpg" />
                <img src="_images/_image04.jpg" />
                <img src="_images/_image05.jpg" />
            </div>
        </div>
        <div id="border">
            <img src="_images/_border.png" />
        </div>
    </div>
    <div id="aboutme">
        <div id="text">
            <p>This is the text</p>
        </div>
    </div>
</body>

在我的示例中，我希望当用户点击“关于我”按钮时，div“home”淡出并且div“aboutme”淡入。

我已经尝试了几乎所有关于stackoverflow的例子，以及任何jQuery / JavaScript网站和谷歌都可以向我投掷而没有运气。

Answer 1

一种方法可能是这样做：

$('#aboutBtn').click(function(){
  $('#home').fadeOut(300);
  $('#aboutme').delay(400).fadeIn(300);
});

编辑：上面的解决方案更适合个别情况，下面的解决方案是您应该做的事情，尤其是当您有多个锚点/ div时。

Here's a working jsFiddle example

<强> HTML：

<a class="buttonNav" target="1">Home</a>
<a class="buttonNav" target="2">About</a>
<a class="buttonNav" target="3">Success</a>


<div id="div1" class="targetDiv">Home Div</div>
<div id="div2" class="targetDiv">About Div</div>
<div id="div3" class="targetDiv">Success Div</div>

<强> CSS：

.targetDiv {
    display:none;
    color:red;
}

.targetDiv:nth-of-type(1) {
    display:block;
}

<强> jQuery的：

$(function(){
   $('.buttonNav').click(function(){
       $('.targetDiv').fadeOut();
       $('#div'+ $(this).prop('target')).delay(400).fadeIn();
   });
});

这种方法对于缩放选项的使用会更加清晰，就像你的情况一样。

Answer 2

您可以fadeout 主页 div并在此fadeout的回调中fadein 关于我 div。像这样的事情：

$('#aboutBtn').click(function(){
  $('#home').fadeOut('slow', function(){
     $('#aboutme').fadeIn('slow');
  });
});

以下是 FIDDLE

Answer 3

以下是一个改进示例：jsfiddle

此示例允许您使用相同的div作为所有链接的容器...

请注意，您应为链接标记添加href。

玩得开心。

jquery的：

$('#aboutme').hide();

$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){ 
    $('#aboutme').text('about me text!!!').fadeIn('slow', function(){ });
});
});
$('#homeBtn').click(function(){
$('#home').fadeOut('slow', function(){ 
    $('#aboutme').text('home text button text!!!').fadeIn('slow', function(){ });
});
});
//add other click events for each link.

编辑：调整 - 节省时间

请参阅此jsfiddle

现在你应该只设置一个数组键作为相关链接的相同ID并输入他的文本！

玩得开心

使用jQuery或纯JavaScript来fadeIn和fadeOut

3 个答案: