以下是一个使用JavaScript实现按钮颜色改变以显示访问者位于当前页面的示例代码:
HTML代码:
按钮颜色改变示例
JavaScript代码(script.js):
// 获取按钮元素
var homeBtn = document.getElementById('homeBtn');
var aboutBtn = document.getElementById('aboutBtn');
var contactBtn = document.getElementById('contactBtn');
// 获取当前页面的URL
var currentUrl = window.location.href;
// 检查URL中是否包含特定的关键字来确定当前页面
if (currentUrl.includes('home')) {
homeBtn.classList.add('active');
} else if (currentUrl.includes('about')) {
aboutBtn.classList.add('active');
} else if (currentUrl.includes('contact')) {
contactBtn.classList.add('active');
}
以上代码中,首先我们在HTML中定义了几个按钮,并分别赋予了一个唯一的id。然后,在JavaScript中,我们通过document.getElementById
方法获取到这几个按钮的元素。接着,我们使用window.location.href
获取当前页面的URL,并通过includes
方法检查URL中是否包含特定的关键字来确定当前页面。最后,我们使用classList.add
方法为当前页面对应的按钮添加一个名为"active"的CSS类,该类在CSS中定义了一个红色的背景色。
当访问该页面时,根据URL中的关键字,相应的按钮会具有红色的背景色,从而显示访问者位于当前页面。
上一篇:按钮颜色点击JavaScript
下一篇:按钮颜色和渐变的功能