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 - 我需要滑塊的主頁來顯示最初加載的頁面。當前提供的代碼

回答

相關問題