Question

我使用bootstrap创建了这个页面，我只想使用一个页面，但是使用锚点将用户带到不同的地方。当我点击例如“Instagram”时，链接在点击时变为红色并且URL更改为index.html#instagram，是否可以告诉网站应该激活Instagram链接（因此一直是红色，直到用户按下另一个菜单中的链接）。

更新：我现在看到，如果我按下“Instagram”，然后当页面滚动到Instagram时，我再次按下Instagram，链接将被激活（红色）。但我希望它在点击时立即激活，而不是第二次激活。

以下是我的网站：http://www.atleconsulting.se/skbd/

Answer 1

没有真正的纯CSS解决方案支持您描述的用例。最接近的是使用:visited，但这样可以设置已经被跟踪的所有锚点，而不仅仅是活动片段。

a:visited { color: red; }

<a href="#foo">Foo</a>
<a href="#bar">Bar</a>

<p></p>
<p></p>
<p></p>
<p id="foo">Foo</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p id="bar">Bar</p>

您必须使用一些JavaScript来实现您的目标：

// delegate all click events to this handler...
document.addEventListener('click', function(e) {
  
  // ...we only care about clicks on 'a' elements
  if (e.target.tagName.toLowerCase() === 'a') {

    // remove all applied '.active' classes
    Array.prototype.forEach.call(document.querySelectorAll('.active'), function(el) {
      el.classList.remove('active');
    });
    
    // add an '.active' class to style the anchor
    e.target.classList.add('active');  
  }
});

.active { color: red; }

<a href="#foo">Foo</a>
<a href="#bar">Bar</a>

<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p id="foo">Foo</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p id="bar">Bar</p>

请注意，此示例实际上并未检查文档片段是否与您的锚点href匹配，如果您要直接浏览片段，也不会为链接着色。

Answer 2

将菜单设置为单选按钮，然后将锚标签放在单选按钮内。使用:checked设置当前所选链接的样式。

我还没有对此进行测试，但我没有时间直到稍后，但我预测点击传播可能会成为一个障碍。

如何使用一个页面和锚点（＃）创建一个活动链接

2 个答案: