jquery - 选定时更改li上的“背景图像:线性渐变”-jQuery

我正在尝试使用CSS在两个jQuery类之间切换。正在应用新类，但好像无法删除旧样式，或者以某种方式覆盖了新样式。要么我只是删除了错误的类，或者从错误的元素中将其删除。无论如何，这是您可以用作演示的fiddle，这是我的代码：

的HTML

<nav id="as_nav">
    <ul class="acTypeNav">
        <li id="home_select"><a href="#Home" class="homeIcon">Home</a></li>
        <li id="roll_out_select"><a href="#Roll Out">Roll Out</a></li>
        <li id="construction_select"><a href="#Construction">Construction</a></li>
    </ul>
</nav>

的CSS

.navHighlight {
    background-image: linear-gradient(#EEE3E3 5%, #C5DDF0 45%, #B3CEE5 51%);
    color: black;
}

.acTypeNav {
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    white-space:nowrap;
    line-height:normal;
}

.acTypeNav li {
    list-style-type: none;
    display: inline-block;
    border-bottom: 1px solid #39f;
    border-right: 1px solid #39f;
    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    padding: 5px 55px 5px 55px;
    float:left;
    background-color: #f0f0f0;
    background-image: linear-gradient(#FEFEFE 5%, #E4F2FC 45%, #E8F3FD 51%);
}

.acTypeNav li:hover {
    background-color: #f0f0f0;
    background-image: linear-gradient(#FEFEFE 5%, #E3F1FB 45%, #D2E8FB 51%);
}

a:link    {
    text-decoration:none;
    color: #5d5d5d;
}

a:visited {
    color: #39F;
}

a:hover {
    color: #000000;
}

a:active  {
    color: #000000;
}

jQuery的

$("#roll_out_select").click(function (e) {

    var myNew = 'navHighlight';
    var myOld = 'acTypeNav li';
    $("#roll_out_select").removeClass(myOld);
    $("#roll_out_select").addClass(myNew);
    console.log('removed' + ' ' + myOld + ', ' + 'added' + ' ' + myNew);

});

我的最后想法是，这一定与我在课堂上使用background-image: linear-gradient(#FEFEFE 5%, #E4F2FC 45%, #E8F3FD 51%);的事实有关。这种类交换方法可以轻松地用于带有普通background-color:标记的类。这个梯度似乎让我很合适。任何帮助表示赞赏

最佳答案

您已将acTypeNav类应用于ul元素，但正尝试将其从li元素中删除。

相反，您可以使用以下命令为li元素提供默认样式和突出显示的样式

.acTypeNav li.navHighlight {
    background-image: linear-gradient(#EEE3E3 5%, #C5DDF0 45%, #B3CEE5 51%);
    color: black;
}

然后

$("#roll_out_select").click(function (e) {
    $(this).toggleClass('navHighlight');
});

演示：Fiddle

关于jquery - 选定时更改li上的“背景图像:线性渐变”-jQuery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20390608/