jQuery

Question

基本上，我希望我的网站具有与以下功能相同的功能：http://jsfiddle.net/sg3s/rs2QK/；除了，我希望目标 1（将在我的主页旁边）在您第一次加载页面时已经显示。目前我的标题栏显示，但在我按下 link 之一之前没有内容。因此，我该如何编辑以下代码，以便在您首次加载页面时显示主页？

（另外，我该怎么做才能一次只能激活一个 link，即不允许在激活一个动画的同时激活另一个动画）。

CSS:

body, html {
height: 100%;
margin:0 auto;
width:100%;
background-color: #f1f1f1;
}

#wrapper {
    width:960px;
    height: 630px;
    margin:0 auto;
    font-family: Arial;
    color: #555;
    background-color: white;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    }

div.forMovingPanel {
    position: absolute;
    height: 100%;
    width: 100%;
    display:none;
    }

HTML:

<div id="wrapper">

    <div id="headingLogoBar">
           <ul>
                <li id="menuDisplayedHome"><a href="#target1" class="forMovingPanel">HOME</li>
                <li id="menuDisplayedAbout"><a href="#target2" class="forMovingPanel">ABOUT</a></li>        
                <li id="menuDisplayedPortfolio"><a href="#target3" class="forMovingPanel">PORTFOLIO</a></li>    
                <li id="menuDisplayedContact"><a href="#target4" class="forMovingPanel">CONTACT</a></li>
            </ul>
    </div>

    <div class="forMovingPanel" id="target1"></div>
    <div class="forMovingPanel" id="target2"></div>
    <div class="forMovingPanel" id="target3"></div>
    <div class="forMovingPanel" id="target4"></div>

</div>

jQuery:

<script>


    jQuery(function($) {

$('a.forMovingPanel').click(function() {
var $target = $($(this).attr('href')),
    $other = $target.siblings('.active');

if (!$target.hasClass('active')) {
    $other.each(function(index, self) {
        var $this = $(this);
        $this.removeClass('active').animate({
            left: $this.width()
        }, 500);
    });

    $target.addClass('active').show().css({
        left: -($target.width())
    }).animate({
        left: 0
    }, 500);
}
});

});

</script>

Answer 1

您可以将 id 添加到 link 标记并在页面加载时触发它：

 <a id="link1" href="#target1" class="panel">Target 1</a><br/>

然后只需点击 link:

 $("#link1").click();

请参阅下面的 link

JsFiddle

Answer 2

一次只显示一个动画：

if ($(".panel").is(':animated')) return false;

加载时显示#target1：

<div class="panel active" id="target1" style="background:green;left:0;display:block;">Target 1</div>

http://jsfiddle.net/rs2QK/3624/

jQuery - 我需要在最初加载页面时显示滑块的主页。提供的当前代码

jQuery - I need home page of slider to display when page originally loaded. Current code provided

css

slider

displayobject