Javascript Jquery HTML Web应用程序在加载页面时激活元素

我正在为Android和iPhone制作一款古墓丽影游戏HTML web应用程序，当主页加载底部的标签时，标签上写着“主页”未激活，但页面已激活。当我有4页“主页”、“墓穴”、“游戏地图”、“奖杯”时，如何使按钮处于激活状态

因此，如果我点击“墓穴”，墓穴页面将加载并像一个新页面一样运行，但按钮未激活。我必须再次点击按钮，使其看起来激活。我该怎么解决这个问题真烦人

我对Javascript和jQueryJavaScript非常陌生，所以试着用一种无趣的方式来解释它

以下是我的iPhone上的外观

---

通过Dropbox链接到应用程序（不知道它是否能工作，因为它是一个私有文件）

如果您不使用任何类型的框架，您可以检查

窗口.location.pathname

或

窗口.location.hash

并将其与数组或哈希匹配，以确定应选择哪个按钮以及显示什么内容。我以jQuery为例编写了一个JSFIDLE

函数ViewModel（）{
var self=这个；
var$view=$（“#view”）；
var$nav=$（“#footernav”）；
var$navli=$nav.find（'li'）；
var$navlinks=$nav.find（'a'）；
var hashtags={}；
变量内容=[
“主页”，
“坟墓页”，
“游戏地图页”，
“奖杯页面”
];
$navlinks.每个（功能（i）{
hashtags[$（this.attr（'href'）]=i；
});
函数resetNav（）{
$navli.removeClass（'active'）；
}
函数setActive（）{
重置导航（）；
var currentHash=window.location.hash；
var id=hashtags[currentHash]| | 0；
$（$navli[id]）.addClass（'active'）；
setContent（id）；
}
函数setContent（id）{
$view.html（内容[id]）；
}
$（窗口）.on（'hashchange'，函数（）{
setActive（）；
setContent（）；
});
setActive（）；
}
var vm=new ViewModel（）；

没有看到您的任何代码，我们只能猜测。您自己尝试过什么吗？通过Dropbox链接到应用程序）

<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>