Question

我正在尝试使用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:标记的类。这个渐变似乎让我适合。任何帮助表示赞赏

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

选择时更改li上的“background-image：linear-gradient” - jQuery

1 个答案: