1个页面站点，根据您所处的页面部分更改url和活动导航
1个页面站点，根据您所处的页面部分更改url和活动导航
提问于 2015-05-06 18:06:03
我正在尝试创建一个单页面的网站，只是为了测试它。
目前它正在工作，点击导航链接将滚动到页面的特定部分，更改url以包括页面的id，并将活动选项卡css更改为活动。
虽然它可以在点击导航菜单按钮时工作，但我无法让url更改(例如，index.html > index.html#page1)和活动选项卡，以便在滚动页面时应用活动css样式。
我到处看了看，就是不能让它工作。
<body>
<nav class="nav-bar">
<ul>
<li class="top active">Top</li
><li class="page1">Menu1</li
><li class="page2">Menu2</li
><li class="page3">Menu3</li
><li class="page4">Menu4</li>
</ul>
</nav>
<div id="top"></div>
<div id="page1"></div>
<div id="page2"></div>
<div id="page3"></div>
<div id="page4"></div>
</body>js
$(document).ready(function(){
$("nav ul li").click(function(){
var sectionId = $(this).attr('class')
var sectionClass = $(this).attr('class')
$('.active').removeClass('active'); /// Highlight on click
$('.'+sectionClass).addClass('active');
$('html, body').animate({ /// Scroll on click
scrollTop: $("#"+sectionId).offset().top},'slow');
window.location.href = "index.html" + "#" + sectionId;
});
});Stack Overflow用户
发布于 2015-05-06 18:32:09
上次我检查过你可以通过使用<a>标签改变超文本标记语言中的网址，你应该不需要任何JavaScript。试试这个：
<nav class="nav-bar">
<ul>
<li class="top active">Top</li>
<li class="page1"><a href="#page1">Menu1</a></li>
<li class="page2"><a href="#page2">Menu2</a></li>
<li class="page3"><a href="#page3">Menu3</a></li>
<li class="page4"><a href="#page4">Menu4</a></li>
</ul>
</nav>当然，您可能需要更改一些CSS，因为您现在也有一个<a>标记。
至于你的CSS问题，我得看看你的网站才能知道哪里出了问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30073575
复制相关文章
相似问题
腾讯云开发者
