2014-01-22 44 views
-1

Im製作古墓麗影遊戲HTML web應用程序對於Android和iPhone以及當主頁面加載底部的標籤時,「Home」未激活但頁面爲空。我怎麼能使按鈕激活當任何相應的頁面加載我有4頁「家」,「墳墓」,「遊戲地圖」,「獎盃」Jquery HTML Web app頁面加載激活元素

因此,如果我點擊「墓」墓葬頁面加載並像一個新的頁面,但按鈕不活動。我必須再次點擊按鈕才能看起來很活躍。它煩人我該如何解決這個問題。

我extreamly新的JavaScript和JQuery的Javascript所以要儘量解釋它在noobish方式

這裏就是它看起來像我的iPhone
https://db.tt/zq1KyjMj

鏈接通過Dropbox的應用程序(唐」不知道它是否會起作用,因爲它是一個私人文件)。 https://dl.dropboxusercontent.com/s/fmqbkuxqjbfbh18/TombRaiderApp.html?dl=1&token_hash=AAFU3RZVjGsKT4WLqHjWSGsP-90CfVKn5Bc3N7MgxqVo7Q

+1

沒有看到任何代碼,我們只只能猜測。你有沒有嘗試過自己? –

+0

通過Dropbox鏈接到應用程序https://dl.dropboxusercontent.com/s/fmqbkuxqjbfbh18/TombRaiderApp.html?dl=1&token_hash=AAFU3RZVjGsKT4WLqHjWSGsP-90CfVKn5Bc3N7MgxqVo7Q) – Brennan

回答

0

如果你沒有使用任何類型的框架,你可以檢查window.location.pathnamewindow.location.hash和匹配,對一個數組或哈希找出哪個按鈕應該被選中,並顯示哪些內容。我用jQuery寫了一個jsfiddle作爲例子。

http://jsfiddle.net/psyrendust/4jRQb/

<div class="container"> 
    <section id="view"> 
    </section> 
    <nav id="footernav"> 
     <ul> 
      <li><a href="#Home">Home</a></li> 
      <li><a href="#Tombs">Tombs</a></li> 
      <li><a href="#GameMap">Game Map</a></li> 
      <li><a href="#Trophies">Trophies</a></li> 
     </ul> 
    </nav> 
</div> 
<script> 
function ViewModel() { 
    var self = this; 
    var $view = $('#view'); 
    var $nav = $('#footernav'); 
    var $navli = $nav.find('li'); 
    var $navlinks = $nav.find('a'); 
    var hashtags = {}; 
    var content = [ 
     "Home Page", 
     "Tombs Page", 
     "Game Map Page", 
     "Trophies Page" 
    ]; 
    $navlinks.each(function (i) { 
     hashtags[$(this).attr('href')] = i; 
    }); 
    function resetNav() { 
     $navli.removeClass('active'); 
    } 
    function setActive() { 
     resetNav(); 
     var currentHash = window.location.hash; 
     var id = hashtags[currentHash] || 0; 
     $($navli[id]).addClass('active'); 
     setContent(id); 
    } 
    function setContent(id) { 
     $view.html(content[id]); 
    } 
    $(window).on('hashchange', function() { 
     setActive(); 
     setContent(); 
    }); 
    setActive(); 
} 

var vm = new ViewModel(); 
</script>