Question

我的css风格

#nav {
    position: relative;

}

和html代码是

<div class="header-background">
        <!-- <div> -->
         <div id="logo">Site Title</div>

         <div id="nav">
               <nav id="desktop-nav">
            <a class="nav-item" href="#1">about</a>
            <a class="nav-item" href="#2">news</a>
            <a class="nav-item" href="#3">Community</a>
            <a class="nav-item" href="#4">Docs</a>
           </nav>

    </div>

这里我有关于，新闻，社区，文档这4个字段..我想点击任何按钮时假设“关于”那个时间“关于”按钮颜色更改为黄色和其他按钮文字颜色将白色 ... 所以，我正在使用jquery

 $(".desktop-nav a").live("click",function(){
    $(".desktop-nav a").removeClass("active");
        $(this).addClass("active");
    });

但颜色没有变化。这些建议给我一些东西......

Answer 1

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。

根据您的HTML代码，导航代码的ID不是类。

这是工作代码：

$("#desktop-nav a").on("click", function(){
    $("#desktop-nav a").removeClass("active");
        $(this).addClass("active");
});

Answer 2

只需做一个无所谓的建议：使用正确的选择器。

此外，您可以使用jQuery的.siblings()函数使您的代码更通用。

$("#desktop-nav").on("click", 'a', function(){
    $(this).addClass("active").siblings().removeClass("active");
});

Answer 3

您的jQuery代码不起作用，因为它对您的HTML不好。你似乎错了你的jQuery选择器。

所以，我建议做一些改变：

第一次更改： nav元素的ID为desktop-nav。您的jQuery代码方法正在查找名为desktop-nav的类。这可能是一个错字。

第二次更改：如前所述live方法已弃用。您可以使用on()或click()方法。我在我的示例中使用了click()方法。

如果您进行了第一次更改，则代码应该正常工作，即在jQuery中用.desktop-nav替换#desktop-nav。

第二次更改将确保符合最佳预算。

请参阅下面的代码：

＆＃13;

$("#desktop-nav a").click(function(){
     $("#desktop-nav a").removeClass("active");
     $(this).addClass("active");
 });

＆＃13;

#nav {
    position: relative;
    display: block;
    height: 55px;
    line-height: 55px;
    width: 100%;
    max-width: none;
    margin: 0;
    background: #333;
    z-index: 1;
    border-bottom: 1px solid #666;
    font-weight: 600;
    font-family: helvetica, arial, sans-serif;
    font-size: 14px;
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;
}
#nav, #nav * {
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}
.nav-item {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}
a.active {
    color: #82b965;
}
/* Desktop */
 #desktop-nav .nav-item {
    display: block;
    padding: 0 20px;
    float: right;
    -webkit-transition: color 200ms linear;
    -moz-transition: color 200ms linear;
    -ms-transition: color 200ms linear;
    -o-transition: color 200ms linear;
    transition: color 200ms linear;
}
#desktop-nav .nav-item:hover, #desktop-nav .nav-item:active {
    opacity: 0.7;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header-background">
    <!-- <div> -->
    <div id="logo">Site Title</div>
    <div id="nav">
        <nav id="desktop-nav"> 
            <a class="nav-item" href="#1">about</a>
            <a class="nav-item" href="#2">news</a>
            <a class="nav-item" href="#3">Community</a>
            <a class="nav-item" href="#4">Docs</a>
        </nav>
</div>

＆＃13;

如何在活动时更改导航项颜色？

3 个答案: