点击它时,Li元素不会保持选中状态

Question

我创建了一个li项目,Html.ActionLink最终将其渲染为锚标记.我已经将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特性:您的.highlightMenu {}选择器永远不会被应用,因为.#navcontainer ul li {}选择器更具体.首选类选择器,查看BEM方法.

2. 来自MDN关于!important:

   !important然而,使用是不好的做法,应该避免使用,因为它会破坏样式表中的自然级联,从而使调试变得更加困难.当与!important规则的两个冲突声明应用于同一元素时,将应用具有更高特异性的声明.

3. 如果要在单击时将.highlightMenu类设置为,则可以使用jQuery .closest().<li><a>

4. 如果动态添加列表项,则可以使用事件委派.

我已经清理了你的代码并用BEM样式重新编写了修复程序,请查看:

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

Answer 2

我对你的 CSS 和脚本做了一些更改。现在新类已正确添加到元素中。

请查看https://fiddle.jshell.net/mh2gqmju/

一切顺利。