Question

我正在制作古墓丽影游戏HTML网络应用程序对于Android和iPhone，当主页面加载底部的标签时，“Home”未激活但页面为。如果任何相应的页面加载我有4个页面“Home”，“Tombs”，“Game Map”，“Trophies”

所以，如果我点击“Tombs”，墓葬页面会加载并像新页面一样运行，但按钮不活动。我必须再次点击按钮才能激活它。它很烦人如何解决这个问题。

我对Javascript和JQuery Javascript非常陌生，所以试着以一种无声的方式解释它

这就是我的iPhone上的样子 https://db.tt/zq1KyjMj

通过Dropbox链接到应用程序（不知道它是否可以工作，因为它是私有文件）。 https://dl.dropboxusercontent.com/s/fmqbkuxqjbfbh18/TombRaiderApp.html?dl=1&token_hash=AAFU3RZVjGsKT4WLqHjWSGsP-90CfVKn5Bc3N7MgxqVo7Q

Answer 1

如果您没有使用任何类型的框架，您可以检查window.location.pathname或window.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>

Jquery HTML Web app在页面加载时激活元素

1 个答案: