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

Question

我创建了一个li项Html.ActionLink，最终将其呈现为锚标记。我已经将CSS应用于悬停，它的工作原理非常好。

现在，当我点击它时，我需要突出显示li框。我使用过jQuery，但似乎没有用。我检查了调试工具，似乎没有任何错误。所以我猜这个类没有得到应用。我不知道问题是什么。请参阅下面的代码。

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

1. 您应该阅读CSS Specificity：我们永远不会应用您的.highlightMenu {}选择器，因为.#navcontainer ul li {}选择器更具体。首选Class selectors，请查看BEM methodology。

2. 来自MDN关于!important：

     

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

3. 如果您想在点击.highlightMenu时将<li>课程设为<a>，则可以使用jQuery .closest()。

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

我已清理您的代码并在BEM-style中使用修正程序重新编写代码，请查看：

＆＃13;
＆＃13;
$('.nav').on('click', '.nav__link', function() {
    $('.nav__item_selected').removeClass('nav__item_selected');
    $(this).closest('.nav__item').addClass('nav__item_selected');
});
＆＃13;
.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;
    }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

我已经改变了你的CSS和你的脚本。 现在，新类正确添加到元素中。

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

一切顺利。

Answer 3

您所做错的是定位超链接，而您只需要突出显示列表项。

但现在，如果您更正代码以定位列表中的列表项而不是超链接，您将无法在屏幕上看到更改。 （显然，您可以在浏览器的开发人员工具中看到这些类切换。）

为什么这样？因为列表项中的超链接隐藏了单击列表项时要查看的所有更改。

我向.highlightMenu添加了一个CSS属性，以便让您注意到这些更改。

自己看看：

• 修改JavaScript以定位列表项，而不是ul
中#navcontainer内的超链接
• .highlightMenu现在携带一个额外的CSS属性（大纲），以注意点击事件的样式更改。

$(document).ready(function() {
  $('#navcontainer ul li').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;
outline: 1px solid red;
}

<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 4

快速简单的黑客攻击，允许元素在点击时响应，但不需要任何脚本：

• 将PlainTimestamp属性添加到元素
• 使用tabindex="0"伪类
将样式应用于元素

工作示例：

:focus

li {
display: inline-block;
width: 100px;
height: 100px;
color: rgb(227, 227, 227);
background-color: rgb(127, 127, 127);
text-align: center;
vertical-align: top;
}

li:nth-of-type(1):hover {
color: rgb(255, 255, 0);
background-color: rgb(255, 0, 0);
}

li:nth-of-type(1):focus {
color: rgb(255, 255, 255);
background-color: rgb(0, 127, 0);
}

li:nth-of-type(2):hover {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
}

li:nth-of-type(2):focus {
color: rgb(255, 255, 255);
background-color: rgb(127, 127, 255);
}

Answer 5

我认为您的代码可能无法正常工作的原因是此行

$('#navcontainer ul li a').click(function()

您已在选择器中包含锚“a”，但您希望突出显示“li”标记。应该更像这样：

$('#navcontainer ul li').click(function()

我在fiddle.jshell上检查了这个，似乎解决了这个问题。

Answer 6

<code>
$(document).ready(function() {
   $(document).on('click', '#navcontainer ul li a', function () {
     $('.highlightMenu').removeClass('highlightMenu');
     $(this).addClass('highlightMenu');
  });`enter code here`
});

</code>
<br>
Please use the above added code i believe it's good for query.. 

Answer 7

您的代码是正确的......您只需稍微修改.css即可。

旧css： -

     padding: .2em 3em 1em 1em;

更改为： -

padding: 2px 1px 1px 1px ;

查看截屏

$(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;
  cursor:pointer;
  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: 2px 1px 1px 1px ; /*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><a> Team Management </a></li>
        <li><a>User Management</a></li>
    </ul>
</div>

Answer 8

我对css和jquery进行了一些更改

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#navcontainer ul li').click(function(e) {
  	e.preventDefault(); // Remove this line please, just for this example
    $(this).addClass('highlightMenu').siblings().removeClass('highlightMenu');
  });
});

＆＃13;

#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: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;
}

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

＆＃13;

<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><a href="/admin/team">Team Management</a></li>
    <li><a href="/admin/userprofile">User Management</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;