更改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>