2014-03-29 48 views
0

我有一個單頁的網頁設計,其中菜單是垂直對齊和固定在左邊,每個頁面的內容在菜單上點擊右邊彈出。它是在打開索引頁時,只顯示沒有任何活動菜單的菜單。jQuery,HTML5網頁設計錯誤

enter image description here

但我希望主菜單被激活和網頁應該在適當的時候顯示加載索引頁時。

enter image description here

的家應該是積極和索引自動加載。

HTML

<ul id="menu"> 
      <li><a id="link" href="#!/page_Home"><span></span><strong>Home</strong></a></li> 
      <li><a href="#!/page_About"><span></span><strong>About</strong></a></li> 
      <li><a href="#!/page_Portfolio"><span></span><strong>Gallery</strong></a></li> 
      <li><a href="#!/page_Services"><span></span><strong>Top Rated</strong></a></li> 
      <li><a href="#!/page_Contact"><span></span><strong>Contact</strong></a></li> 
</ul> 

jQuery的

$(window).load(function() { 
    var act=''; 

    $('#content > ul > li').css({position:'absolute', display:'none'}); 
    $('#content > ul > li').find('.box1').css({height:'0'}) 

    $('#menu > li > a span').css({opacity:'0'}) 

    $('#menu > li > a').hover(function(){ 
     $(this).find(' > span').stop().animate({opacity:'1'},600);       
    }, function(){ 
     if (!$(this).hasClass('active')) { 
      $(this).find(' > span').stop().animate({opacity:'0'},600);       
     } 
    }) 

    $('#menu > li').each(function(num){ 
     $(this).data({num:num}) 
    }) 
    $('#content > ul > li').each(function(num){ 
     $(this).data({num:num}) 
    }) 

    if (location.hash.slice(0,3)=='#!/') { 
     page=location.hash.slice(3); 
     open_page('#'+page); 
     fl=false; 
    } 
    if ((location.hash=='#')||(location.hash=='')) { 
     open_page(''); 
     fl=true; 
      $('#content').stop().animate({height:'668'}) 
    } 
    $('a').click(function(){ 
     if ($(this).attr('href').slice(0,3)=='#!/') { 
      page=$(this).attr('href').slice(3); 
      open_page('#'+page); 
      return false; 
     } 
     if ($(this).attr('data-type')=='close') { 
      close_page()  
     } 
    }) 
    function open_page(page){ 
     location.hash='#!/'+page.slice(1); 
     $('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600); 
     Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true }); 
     num=$(page).data('num'); 
     $('#menu > li').each(function(){      
      if ($(this).data('num')==num) { 
       $(this).find('> a').addClass('active').find('> span').stop().animate({opacity:'1'},600); 
       Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true }); 
      } 
     }) 
     fl=false; 
     $('#content').stop().animate({height:'868'}) 
     if (act!='') { 
      $(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){ 
       $(act).css({display:'none'}); 
       $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){ 
        act=page; 
       }); 
      }) 
     } else { 
      $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){ 
       act=page; 
      });  
     } 
    } 
    function close_page(page){ 
     $('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600); 
     Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true }); 
     location.hash='#'; 
     $(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){ 
      $(act).css({display:'none'}); 
      act=''; 
      fl=true; 
      $('#content').stop().animate({height:'668'}) 
     }); 
     return false; 
    } 
}) 

回答

0

抱歉,但我沒有做閱讀所有的代碼的努力。看起來你正在做一個業餘主頁(通過JavaScript設置初始CSS屬性,而不是使用樣式表,缺少分號,全局變量等)。
爲此,您可以輕鬆地在頁面加載時通過javascript點擊第一個鏈接。
這是一個有點骯髒,但它會工作,它似乎你不關心,如果它骯髒或不。
所以把

$('#menu > li > a : first ').click(); 

在$(窗口).load地方(函數(){...})。