stackoverflow，好久不见
所以，我正在将我的网站转换为纯 CSS3 - 只是为了好玩，或者基本上不使用 jQuery。我在尝试更新当前菜单时遇到了一个小问题。
该页面在某种程度上是“一页”，因此只有 1 个 index.html。问题是，我目前正在使用 jQuery 更改当前部分/页面的文本颜色，如下所示:
菜单:
<div id="menuDiv">
<ul class="menu" id="menu">
<li>
<a href="#about" class="2 scroll" onclick="setMenuStyle(this); return false;">about</a>
</li>
<li>
<a href="#background" class="3 scroll" onclick="setMenuStyle(this);">background</a>
</li>
<li>
<a href="#mindset" class="4 scroll" onclick="setMenuStyle(this);">mindset</a>
</li>
<li>
<a href="#vision" class="5 scroll" onclick="setMenuStyle(this);">vision</a>
</li>
<li style="margin-top: 0.93em">
<a href="#home" class="1 scroll" title="HOME"><img src="gfx/home.png" alt="HOME" /></a>
<a href="https://dk.linkedin.com/in/rbfmnpwr" target="_blank" title="LinkedIn"><img src="gfx/linkedin.png" alt="LinkedIn" /></a>
<a href="#contact" class="6 scroll" title="Contact"><img src="gfx/contact.png" alt="Contact" /></a>
</li>
<li>
<a href="#thanks" class="7 scroll"></a>
</li>
</ul>
</div>
jQuery
jQuery.noConflict();
jQuery(document).ready(function () {
getHash();
});
// Keep track of our current state
currentSection = 1;
function getHash() {
jQuery('.scroll').on('click', function () {
// Get our new state
var nr = parseInt(jQuery(this).attr('class').split(' ')[0]);
// Calculate the difference, with element height of 560px using formular dest = (newPows - currentPos) * elmHeight
var scrollTop = (nr - currentSection) * 560;
jQuery('#contentDiv').animate({
scrollTop: scrollTop
}, 400);
return false;
});
}
function setMenuStyle(ele) {
// Reset menu
jQuery("#menu li a").each(function () {
var child = jQuery(this);
child.attr('style', '');
});
// Set menu style
ele = jQuery(ele);
ele.attr('style', 'color:#009688;');
}
但是，我想完全通过 CSS 来改变这种颜色。所以我想，“嘿，为什么不使用 :target 来这样做。但它就是行不通，我不知道为什么。
最佳答案
您无法使用纯 CSS 检测滚动条的位置。此外，:target 用于在元素的 id 被 anchor 引用或作为 MDN 时设置元素的样式。说:
The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.
例如，如果 URI 是 http://example.com/index.html#heading1，带有 id="heading1" 的元素可以使用:target 伪选择器。
这是一个 working example .
您可以使用 :target 做的其他很酷的事情:
关于jquery - :target not working to change text-color，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40244447/