<think>好的，我现在需要帮用户找到使用jQuery实现
点击导航栏变色并跳转页面的示例代码。用户的问题提到了
导航栏点击后
变色，
跳转页面，以及可能涉及刷新后保持状态的需求。根据提供的引用内容，我需要综合这些信息来构建解决方案。
首先，我需要回顾用户提供的三个引用。引用[1]和[2]都提到了
导航栏点击后添加高亮或active类，
并在
页面跳转或刷新后保持状态。引用[3]则涉及滚动到
对应位置和
导航栏菜单项随滚动而变化。不过用户当前的需求主要是
点击变色和
跳转，可能不需要滚动效果，但可能需要考虑
页面刷新后的状态保持。
首先，我需要确定如何实现
点击导航栏链接时改变样式。通常的做法是为被
点击的链接添加一个active类，
并移除其他链接的active类。这可以通过jQuery的click事件处理函数来实现。引用[2]中的代码示例使用each循环遍历所有导航链接，检查当前
页面的URL是否与链接的href匹配，如果匹配则添加active类。这可能在
页面加载时设置正确的active状态，但用户需要的是
点击时的即时反馈。
不过，用户的问题可能还希望处理单页应用内的
跳转，或者普通的
页面跳转。如果是在单页应用中，
点击链接不会导致
页面刷新，因此可以通过
点击事件直接处理样式变化。但如果是普通的
页面跳转，每次
点击都会加载新
页面，这时候需要在
页面加载后根据当前URL设置active状态。用户提供的引用[2]的代码就是在
页面加载时运行的，这可能适用于这种情况。
现在，结合用户的需求，可能需要两个部分：一是
点击导航链接时
跳转页面，
并在
跳转后的
页面加载时保持active状态；二是在当前
页面内
点击链接时（可能是不
跳转的情况，比如锚点）改变样式。但根据引用[3]，可能还涉及滚动到
对应位置的情况，但用户的问题可能不需要这个，所以可能需要区分。
用户提供的引用[1]中的示例代码可能更接近需求，因为它在
点击时添加高亮，
并在刷新后保持。但需要确保在
页面加载时根据当前URL设置active类，这在引用[2]中已经处理了。因此，解决方案可能结合这两者的代码。
接下来，我需要编写示例代码，确保以下几点：
1.
点击导航链接时，添加active类，移除其他链接的active类。
2.
页面跳转后，在加载新
页面时根据当前URL自动设置active类。
3. 处理可能的刷新情况，保持active状态。
可能的代码结构如下：
首先，在
页面加载时（DOM ready），遍历所有导航链接，检查它们的href是否与当前
页面的URL匹配。如果匹配，则添加active类。这处理了
页面加载或刷新后的状态保持，如引用[2]所示。
然后，为导航链接绑定
点击事件处理程序，当
点击时，移除所有active类，
并为当前
点击的链接添加active类。这处理了即时反馈，但需要注意如果
页面跳转，这个
点击事件可能不会保留，因为
页面会重新加载。因此，
点击时的处理可能更多是视觉反馈，而真正的状态保持还是依赖于
页面加载时的检查。
因此，主要代码可能分为两部分：
页面加载时的检查和
点击时的处理。但如果是普通的
页面跳转，
点击时的处理可能无法持久，因为
页面会重新加载，所以必须依赖
页面加载时的逻辑。因此，可能不需要在
点击时处理active类，而是依靠
页面加载后的URL匹配。
但用户可能希望在
点击时立即看到样式变化，即使
页面跳转需要时间。这时候可以添加一个过渡效果，比如在
点击时添加active类，但最终
页面加载后的状态还是由URL决定。
不过，在实际应用中，如果
页面跳转发生，
点击事件的处理函数可能在
页面卸载前执行，但无法影响新加载的
页面。因此，主要的active状态处理应在
页面加载时完成，如引用[2]的代码所示。
因此，正确的做法可能是在
页面加载时运行代码，检查当前URL，
并为
对应的导航链接添加active类。这样，无论是通过链接
跳转、手动刷新还是其他方式进入
页面，都能正确显示active状态。
此外，引用[1]中的代码在
点击时添加active类，
并存储到localStorage中，这样在
页面刷新后可以读取之前的状态。这可能是一种解决方案，但需要确保在
页面加载时检查localStorage中的值，
并应用
相应的类。这可能更复杂，但适用于单页应用或无需
页面跳转的情况。
用户的问题中提到的是“
跳转页面”，可能意味着普通的
页面跳转，而不是单页应用内的锚点滚动。因此，正确的做法可能是在每个
页面的加载时，根据当前
页面的URL来设置active类。例如，在
导航栏的每个
页面中，包含
相同的导航结构，
并在每个
页面加载时运行脚本，检查当前URL，设置
对应的active类。
因此，示例代码可能如下：
HTML部分：
```html
<ul class="nav">
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
```
jQuery部分：
```javascript
$(document).ready(function() {
//
页面加载时设置active类
var currentUrl = window.location.pathname;
$('.nav a').each(function() {
if ($(this).attr('href') === currentUrl) {
$(this).addClass('active');
}
});
//
点击时
跳转并处理active类（如果需要阻止默认
跳转，但通常不需要）
$('.nav a').click(function(e) {
// 如果是普通的
跳转，不需要阻止默认行为
// 这里可能不需要处理，因为
页面会
跳转，重新加载后会由上面的代码设置active
// 但如果需要即时反馈，可以添加以下代码：
$('.nav a').removeClass('active');
$(this).addClass('active');
});
});
```
但是，如果
点击事件导致
页面跳转，那么click处理函数中的addClass可能不会生效，因为
页面会立即开始
跳转，停止执行后续的JavaScript。因此，在这种情况下，click事件中的addClass可能没有实际效果，因为
页面会被卸载。因此，正确的做法可能完全依赖于
页面加载时的URL检查，而不需要在click事件中处理active类。
因此，可能只需要
页面加载时的代码，如引用[2]中的示例：
```javascript
$(document).ready(function(){
$(".nav a").each(function(){
var $this = $(this);
if($this[0].href === String(window.location)){
$(".nav a").removeClass("active");
$this.addClass("active");
}
});
});
```
但需要注意，比较href和window.location时可能需要处理绝对路径和
相对路径的问题。例如，如果链接的href是
相对路径，而window.location是绝对URL，直接比较可能不匹配。因此，可能需要规范化URL的比较，例如使用indexOf或提取路径部分进行比较。
例如，可以将两者的路径部分进行比较：
```javascript
var currentPath = window.location.pathname;
$('.nav a').each(function() {
var linkPath = $(this).prop('pathname');
if (linkPath === currentPath) {
$(this).addClass('active');
}
});
```
这样可以避免因为域名或查询参数的不同而导致的不匹配。
此外，引用[1]中的代码在
点击时使用localStorage存储当前选中的导航项，然后在
页面加载时读取该存储值来设置active类。这种方法适用于单页应用，或者在
页面刷新后保持状态的情况。但如果是普通的
页面跳转，每次加载
页面时都需要根据URL来设置，这可能更可靠。
综合来看，用户可能需要的是在
页面加载时根据当前URL设置active类，
并且在
点击时
跳转到
对应页面。因此，示例代码应主要包含
页面加载时的逻辑，如引用[2]所示，
并可能需要调整URL比较的方式。
另外，如果
导航栏包含多个层级的链接，可能需要更精确的匹配。例如，如果链接是/about，而当前URL是/about/team，可能需要更复杂的逻辑，但用户的问题可能不需要处理这种情况。
最后，结合用户的引用和需求，正确的示例代码可能如下：
HTML结构：
```html
<div class="collapse">
<ul class="navbar-nav">
<li class="nav-item"><a href="/index.html" class="nav-link">首页</a></li>
<li class="nav-item"><a href="/about.html" class="nav-link">关于</a></li>
<li class="nav-item"><a href="/contact.html" class="nav-link">联系</a></li>
</ul>
</div>
```
jQuery代码：
```javascript
$(document).ready(function() {
//
页面加载时设置当前
页面对应的导航高亮
var currentUrl = window.location.href;
$('.collapse a').each(function() {
var $this = $(this);
if ($this.attr('href') === currentUrl) {
$('.collapse a').removeClass('active');
$this.addClass('active');
}
});
//
点击导航项时添加高亮效果（适用于无需
跳转的场合，如锚点）
$('.collapse a').click(function(e) {
// 如果是锚点
跳转，阻止默认行为
并处理滚动
if (this.hash !== "") {
e.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
window.location.hash = hash;
});
}
// 移除所有active类
并给当前项添加
$('.collapse a').removeClass('active');
$(this).addClass('active');
});
});
```
不过，这里可能存在的问题是，如果
点击的链接会导致
页面跳转（如href到另一个
页面），那么click事件中的addClass不会生效，因为
页面会重新加载。因此，这种情况下，active类的设置必须完全依赖于
页面加载时的URL检查，而
点击事件中的处理仅适用于不导致
页面跳转的情况，例如锚点滚动。
因此，正确的代码应分开处理这两种情况。如果导航链接用于
页面跳转，则只需
页面加载时的处理；如果是用于
页面内的锚点
跳转，则需要
点击事件处理滚动，
并更新active类。
用户的问题可能更关注于
页面跳转后的状态保持，因此重点应放在
页面加载时的URL匹配。因此，示例代码可能更侧重于引用[2]中的方法，
并确保URL比较正确。
总结，最终的代码示例可能如下：
HTML：
```html
<ul class="nav">
<li><a href="home.html" class="nav-link">首页</a></li>
<li><a href="about.html" class="nav-link">关于</a></li>
<li><a href="contact.html" class="nav-link">联系</a></li>
</ul>
```
jQuery：
```javascript
$(document).ready(function() {
// 获取当前
页面的路径
var currentPath = window.location.pathname.split('/').pop(); // 获取文件名，如"about.html"
// 遍历所有导航链接
$('.nav-link').each(function() {
var linkPath = $(this).attr('href').split('/').pop();
// 比较文件名
if (linkPath === currentPath) {
$(this).addClass('active');
}
});
});
```
这种方法通过比较文件名来设置active类，适用于不同层级的路径。此外，可能需要处理首页的特殊情况，例如当href是index.html，而当前路径是根目录/时，可能需要额外判断。
总之，根据用户的引用和需求，正确的示例代码应结合
页面加载时的URL匹配，确保在
跳转或刷新后正确应用active类，
并在
点击时处理可能的锚点滚动等情况。</think>以下是使用jQuery实现
点击导航栏变色并跳转页面的代码示例，结合
页面加载状态同步和
点击交互效果：
```html
<!DOCTYPE html>
<html>
<head>
<style>
.nav-item a { padding: 10px; color: #333; }
.nav-item a.active { background: #007bff; color: white; }
</style>
</head>
<body>
<nav class="main-nav">
<ul>
<li class="nav-item"><a href="#home">首页</a></li>
<li class="nav-item"><a href="#about">关于</a></li>
<li class="nav-item"><a href="#contact">联系</a></li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
//
页面加载时初始化高亮状态
var currentHash = window.location.hash;
if (currentHash) {
$('.nav-item a[href="' + currentHash + '"]').addClass('active');
} else {
$('.nav-item a:first').addClass('active');
}
//
点击导航处理
$('.nav-item a').click(function(e) {
e.preventDefault();
var target = $(this).attr('href');
// 更新URL哈希
window.location.hash = target;
// 切换高亮状态
$('.nav-item a').removeClass('active');
$(this).addClass('active');
// 执行滚动动画
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
});
// 监听哈希变化（浏览器前进/后退按钮）
$(window).on('hashchange', function() {
var newHash = window.location.hash;
$('.nav-item a').removeClass('active');
$('.nav-item a[href="' + newHash + '"]').addClass('active');
});
});
</script>
</body>
</html>
```
### 实现原理说明
1. **状态初始化**：
页面加载时通过`window.location.hash`获取当前锚点，自动激活
对应导航项[^3]
2. **
点击交互**：阻止默认
跳转行为，通过修改哈希值更新URL，使用`animate()`实现平滑滚动[^3]
3. **样式切换**：使用`addClass()`/`removeClass()`方法管理激活状态，CSS定义`.active`样式[^2]
4. **历史支持**：通过`hashchange`事件监听浏览器前进/后退操作，同步更新激活状态[^3]
本文介绍了一种使用JavaScript实现网页中导航栏高亮显示当前页面的方法。通过获取当前URL并与导航链接进行对比，为当前页面对应的导航项添加样式以实现视觉上的高亮效果。
扫一扫
1399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
