Question

stackoverflow，好久不见

所以，我正在将我的网站转换为纯CSS3 - 只是为了它的乐趣，或者基本上不使用jQuery。尝试更新当前菜单时遇到了一个小问题。

该页面是一个＆＃34;一页＆＃34;在某种程度上，所以只有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来改变这种颜色。所以我，但是，嘿，为什么不使用：目标这样做。但它不会起作用，我也不知道为什么。

Answer 1

使用纯CSS无法检测滚动条的位置。此外，:target用于在锚点引用其id时为其设置样式，或者MDN将其置于其中：

：target伪类表示唯一元素（如果有），其id与文档URI的片段标识符匹配。

例如，如果URI为http://example.com/index.html#heading1，则可以使用id="heading1"伪选择器设置带有:target的元素。

这是working example。

您可以使用:target完成的其他很酷的事情：

：目标无法更改文本颜色

1 个答案: