Question

我正在尝试在鼠标悬停时更改链接，然后在单击时更改并保持直到单击新链接。链接开始有点透明，当它悬停时，它会变成完全不透明，带有底部边框或5.当我点击一个链接但是它不会保持活动状态，即使我使用过：

nav ul li a:active, nav ul li a.current {
opacity:1;
border-bottom:5px solid #37DD57;
position: relative;
top: 1px; 
}

我有什么问题或者我需要调用脚本函数吗？这是我的草稿网站：http://envycosmetics.zxq.net/Website/webpages/index.html

Answer 1

活动链接仅在单击另一个链接或窗口对象被销毁之前才处于活动状态。您的链接正在使用新网址重新加载页面，因此在页面加载时，您的所有链接都不是“活动”。您需要使用一些URL检测并以这种方式设置它们，无论是客户端还是服务器端。

试试这个：

var _links    = ['news','about','gallery'], // etc..
    _pagename = null,
    i         = 0,
    max       = _links.length;

for(; i<max; i++) {
    _pagename = window.location.pathname.match(/[a-z]+(?=.html)/);
    if (_pagename == _links[i]) {
        document.getElementById(_pagename).childNodes[0].className = 'current';
    }
}

访问http://envycosmetics.zxq.net/Website/webpages/gallery.html，将上述代码粘贴到您的控制台中，然后按Enter键，您会看到“图库”标签突出显示。

当前链接不保持活跃状态

1 个答案: