クリック時の背景要素の変更

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>

は、あなたが見ることができるように、Imはアクティブリンククラスを取り付けます。しかし、その背景は変わらない。私はこれがmenuLinksのためにオーバーライドされていないと思う。

私を助けることができる人は誰ですか？

Answer 1

.activeLinkクラスは、デフォルトの.menuLink liスタイリングをオーバーライドするのに十分ではないため、問題が発生します。より具体的にする必要があります。また、idセレクタ文字列を手動で構築する代わりに、thisを使用してクリックされた要素を参照することもできます。これを試してみてください：

$('.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>