更改li元素上的背景点击

Question

他想要做的事情是当用户点击一个链接时，背景应该更改为指示用户点击了哪个链接。我试着用jQuery做到这一点：

$('.menuLink').click(function() { 
 
    var img = $(this).find('img'); 
 
    var id = $(this).attr('id'); 
 
    $("#" + id).addClass('activeLink'); 
 
    console.log(id); 
 
});

.menuLinks li { 
 
    color: #ffffff; 
 
    float: left; 
 
    margin-left: 2px; 
 
    width: 115px; 
 
    height: 60px; 
 
    background-color: #004f80; 
 
    text-align: center; 
 
    font-size: 13px; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    font-stretch: normal; 
 
} 
 
.menuLinks li:hover { 
 
    background-color: #006eb3; 
 
    cursor: pointer; 
 
} 
 
.menuLinks li a { 
 
    color: #fff; 
 
} 
 
.activeLink { 
 
    color: #004f80; 
 
    background-color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="menuLinks"> 
 
    <li class="menuLink" id="tillstandshavare">Link1</li> 
 
    <li class="menuLink" id="stationer">Lnk2</li> 
 
    <li class="menuLink" id="formular">Link3</li> 
 
    <li class="menuLink" id="fragor">Link4</li> 
 
    <li class="menuLink" id="installningar">Link5</li> 
 
</ul>

正如你可以看到，即时通讯连接的activeLink类。但背景从未改变。我认为这是因为menuLinks没有被覆盖。

任何人可以帮助我吗？

Answer 1

问题是因为.activeLink类不够具体，因此它会覆盖默认的.menuLink li样式。你需要使它更具体。另请注意，您可以使用this来引用clicked元素，而不是手动构建id选择器字符串。试试这个：

$('.menuLink').click(function() { 
 
    $(this).addClass('activeLink'); 
 
});

.menuLinks li { 
 
    color: #ffffff; 
 
    float: left; 
 
    margin-left: 2px; 
 
    width: 115px; 
 
    height: 60px; 
 
    background-color: #004f80; 
 
    text-align: center; 
 
    font-size: 13px; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    font-stretch: normal; 
 
} 
 
.menuLinks li:hover { 
 
    background-color: #006eb3; 
 
    cursor: pointer; 
 
} 
 
.menuLinks li a { 
 
    color: #fff; 
 
} 
 
.menuLinks li.activeLink { 
 
    color: #004f80; 
 
    background-color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="menuLinks"> 
 
    <li class="menuLink" id="tillstandshavare">Link1</li> 
 
    <li class="menuLink" id="stationer">Lnk2</li> 
 
    <li class="menuLink" id="formular">Link3</li> 
 
    <li class="menuLink" id="fragor">Link4</li> 
 
    <li class="menuLink" id="installningar">Link5</li> 
 
</ul>