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

基本上，我希望我的网站具有以下功能：http://jsfiddle.net/sg3s/rs2QK/;除了第一次加载页面时我希望目标1（在我的主页上）已经显示。目前我的标题栏显示，但没有内容，直到我按下其中一个链接。因此，如何编辑下面的代码，以便在首次加载页面时显示主页？（另外，我该如何做到这一点，所以你一次只能激活一个链接，即不允许一个动画在激活另一个动画时激活）。jQuery - 我需要滑块的主页来显示最初加载的页面。当前提供的代码

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>

来源

2015-11-04 JonnyBoy

的链接，只显示一个动画在一个时间：

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

为了展示＃target1 on load：

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

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

来源

2015-11-05 01:11:02 partypete25

你可以添加一个ID，链接标签，并触发其页面加载时：

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

然后，只需触发链接的点击：

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

参见下文

JsFiddle

来源

2015-11-04 23:05:39 MishaT

小提琴还没有从原来的改变？不过，我不希望页面加载动画;相反，我想让主页马上显示出来。 – JonnyBoy

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

回答

相关问题