3

这是我第一次使用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 网站和 Google 可以向我抛出的任何示例，但都没有运气。

4

3 回答 3

5

一种方法可能是这样做：

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

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

这是一个有效的 jsFiddle 示例。

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

这种方法对于扩展选项的使用会更干净，就像你的情况一样。

于 2013-04-26T19:46:11.043 回答
1

您可以fadeout使用home div，在回调中fadeout您可以fadein使用about me div。像这样的东西：

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

这是小提琴

于 2013-04-26T19:50:38.320 回答
0

这是一个改进的示例：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 并输入他的文本！

玩得开心

于 2013-04-26T20:10:13.787 回答