如果你沒有使用任何類型的框架,你可以檢查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>
沒有看到任何代碼,我們只只能猜測。你有沒有嘗試過自己? –
通過Dropbox鏈接到應用程序https://dl.dropboxusercontent.com/s/fmqbkuxqjbfbh18/TombRaiderApp.html?dl=1&token_hash=AAFU3RZVjGsKT4WLqHjWSGsP-90CfVKn5Bc3N7MgxqVo7Q) – Brennan