javascript - Li 元素在单击时不会保持选中状态

Question

我创建了一个带有 Html.ActionLink 的 li 项，它最终呈现为 anchor 标记。我已经为悬停应用了 CSS，它工作得很好。

现在我需要在单击 li 框时突出显示它。我使用过 jQuery，但这似乎不起作用。我检查了调试器工具，似乎没有任何错误。所以我猜是这个类没有被应用的情况。我不确定是什么问题。请在下面查看我的代码。

$(document).ready(function() {
  $('#navcontainer ul li a').click(function() {
    $('.highlightMenu').removeClass('highlightMenu');
    $(this).addClass('highlightMenu');
  });
});

#navcontainer ul {
  display: block;
  list-style-type: disc;
  padding-top: 40px;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

#navcontainer ul li {
  display: inline-block;
  /*height: 50px;
        width:150px;*/
  border: 5px solid #009ddc;
  border-left: 5px solid #009ddc;
  border-right: 5px solid #009ddc;
  border-bottom: 5px solid #009ddc;
  border-top: 5px solid #009ddc;
  z-index: 0 !important;
  padding: 0;
  background: #fff;
  color: #24387f !important;
}

#navcontainer li a:hover {
  color: #fff !important;
  background-color: #009ddc;
}

#navcontainer ul li a {
  text-decoration: none;
  padding: .2em 3em 1em 1em;
  color: #24387f !important;
  font-size: larger;
  font-weight: bold;
}

.highlightMenu {
  color: #fff !important;
  background-color: #009ddc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
    <ul class="nav navbar-nav navbar-left text-center">

        <li>@Html.ActionLink("Team Management", "Team", "Admin", null, null)</li>
        <li>@Html.ActionLink("User Management", "UserProfile", "Admin", null, null)</li>
    </ul>
</div>

Answer 1

1. 你应该阅读 CSS Specificity : 你的 .highlightMenu {}选择器永远不会被应用，因为 .#navcontainer ul li {}选择器更具体。喜欢Class selectors , 查看 BEM methodology .

2. 来自 MDN 关于 !important :

   Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.

3. 如果你想设置.highlightMenu类别为 <li>当点击 <a> , 你可以使用 jQuery .closest()

4. 如果您动态添加列表项，您可以使用 Event Delegation .

我已经清理了您的代码并在 BEM-style 中重写了它有了修复，请查看:

$('.nav').on('click', '.nav__link', function() {
    $('.nav__item_selected').removeClass('nav__item_selected');
    $(this).closest('.nav__item').addClass('nav__item_selected');
});

.nav {
    display: block;
    list-style-type: disc;
    padding-top: 40px;
}

    .nav__item {
        display: inline-block;
        border: 5px solid #009ddc;
        padding: 0;
        background: #fff;
        color: #24387f;
    }
    
    .nav__item:hover, .nav__item_selected {
        color: #fff;
        background-color: #009ddc;
    }
    
    .nav__link {
        display: inline-block;
        text-decoration: none;
        padding: 0.2em 3em 1em 1em;
        color: #24387f;
        font-size: larger;
        font-weight: bold;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
    <li class="nav__item">
        <a class="nav__link" href="#">Team Management</a>
    </li>
    <li class="nav__item">
        <a class="nav__link" href="#">User Management</a>
    </li>
</ul>