jquery - 选择时更改 li 上的 "background-image: linear-gradient"- jQuery

Question

我正在尝试使用 jQuery 在两个 CSS 类之间切换。正在应用新类，但旧样式似乎无法删除，或者以某种方式覆盖了新样式。或者我只是删除了错误的类，或者从错误的元素中删除了它。无论如何，这是一个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: 标签的类。不过，这种渐变似乎适合我。感谢任何帮助

Answer 1

您已将 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