Question

我正在尝试创建导航菜单，如下所示。如何让我的javascript更改所选锚标签菜单的颜色。

HTML

<script type="text/javascript">
$(function() {
       $("#menu ul li a").click(function() {
       // remove classes from all
       $("#menu ul li a").removeClass("active");
       // add class to the one we clicked
       $(this).addClass("active");
      });
   });
</script>

<div id="menu">
   <ul>
        <li><a href="index.html" class="active">home</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="portfolio.html">portfolio</a></li>
        <li><a href="contact.html">contact</a></li>
    </ul>
</div>

CSS

#menu ul li a{background: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5), to(#fff));;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}

#menu ul li a:hover {
    background: -webkit-linear-gradient(top, #009ec5 0%, #005890 50%, #41d2fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
    }

#menu ul li a.active {
    background: -webkit-linear-gradient(top, #009ec5 0%, #005890 50%, #41d2fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Answer 1

$('#menu ul li a').click(function(){

    $('#menu ul li a').removeClass('active');
    $(this).addClass('active');
});

Answer 2

通过它的外观，您可以在单击锚点时阻止进入新页面。所以我假设您只想将该类应用于与您当前所在页面对应的链接。

您不需要click()事件处理程序。您需要使用window.location.href来确定您所在的页面。从默认链接中删除该类，然后将其添加到具有与窗口href匹配的href属性的类中。如下所示：

$(function() {
    var page = window.location.href.split('/');
    page = page[page.length-1];
    $("#menu ul li a").removeClass("active").filter('[href="'+page+'"]').addClass('active');
});

使用javascript更改所选锚标记文本的颜色

2 个答案: