Question

我的主页上有多个部分。当我在特定部分时，我希望在菜单中突出显示该部分。

我使用的主题是li：current，但这段代码并不总是做同样的事情。

它适用于5个菜单链接中的2个，在我点击它们或滚动到该部分后，它们变成橙色并保持橙色。

单击时其他3个菜单链接变为橙色，当页面滚动到该部分时，菜单链接将失去橙色。

当滚动到这3个部分之一时，菜单链接根本不会改变颜色。

这些部分是用部分标签制作的，菜单链接设置为转到部分ID。

我该如何解决这个问题？

<section id="portfoliosection">
    <div class="portfolio" id="portfolio" role="region" aria-label="Portfolio">
    </div>
    <div id="portfolioh2">
        <h2 class="h2portfolio">Portfolio</h2>
    </div>
    <div id="portfolio1">

        <?php wd_slider(2); ?>
    </div>

    <div id="portfoliotekst">
        <p class="portfoliotekst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget ex finibus, pellentesque urna eu, mattis ipsum. Aenean metus elit, cursus at pharetra vehicula, maximus ut ligula. Fusce lobortis lorem in dolor dapibus elementum. Suspendisse
            ultrices ipsum lectus. Nullam lorem sapien, molestie sit amet elit ultricies, varius gravida erat. Cras ullamcorper, augue suscipit faucibus accumsan, ante nibh viverra dui, ac molestie velit arcu at metus. Duis finibus molestie velit, a efficitur
            ex finibus luctus. In justo dui, hendrerit sed quam ac, iaculis rhoncus orci. Sed cursus, mauris vel laoreet consectetur, massa tortor iaculis nisl, eget mollis nisl nunc nec metus. Phasellus eleifend elit et metus laoreet, vel bibendum arcu
            ultrices. Vivamus id augue sit amet dui lobortis posuere. Nunc accumsan ante nec mauris tincidunt, in porta tortor aliquet. Etiam posuere eget lorem ut commodo.</p>
    </div>
</section>

#portfolio {
    width: 100%;
    height: 5px;
}

.h2portfolio {
    background-color: white;
    text-align: center;
    color: #F16C20;
    margin-top: 5%;
}

#portfolio1 {
    width: 100%;
    text-align: center;
    display: block;
}

#portfoliotekst {
    width: 100%;
    text-align: center;
}

.portfoliotekst {
    margin-top: 4%;
    margin-left: 20%;
    margin-right: 20%;
}

Answer 1

您可以使用 CSS3 psuedo-selectors 。

a:hover
a:visited
a:active

- 或 -

点击后可以给他们一个新的＆＃34;选择＆＃34; 并定义＆＃34; .selected＆＃34;在你的CSS文件中。

.selected{
    color : red;
}

突出显示的菜单链接

1 个答案: