使用jQuery从menu.html加载菜单,然后激活当前链接的步骤如下:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<div id="menuContainer"></div>
load()
方法从menu.html文件加载菜单内容,并使用addClass()
方法为当前链接添加一个激活样式类。代码示例如下:function loadMenuAndActivateCurrentLink() {
// 加载菜单
$('#menuContainer').load('menu.html', function() {
// 获取当前页面的URL
var currentUrl = window.location.href;
// 遍历菜单中的链接
$('#menuContainer a').each(function() {
var linkUrl = $(this).attr('href');
// 判断当前链接是否与页面URL匹配
if (currentUrl.indexOf(linkUrl) !== -1) {
// 添加激活样式类
$(this).addClass('active');
}
});
});
}
$(document).ready(function() {
loadMenuAndActivateCurrentLink();
});
这样,当页面加载完成时,jQuery会从menu.html文件加载菜单内容,并根据当前页面的URL激活对应的链接。你可以根据实际情况修改代码中的选择器、菜单容器ID、菜单文件路径等内容。
推荐的腾讯云相关产品:腾讯云对象存储(COS),用于存储和管理静态资源文件。产品介绍链接地址:腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云