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

Question

我用Html.ActionLink创建了一个li项目，它最终呈现为一个锚标记。 我已经将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. 如果要在单击<a>时将.highlightMenu类设置为<li> ，则可以使用jQuery .closest（） 。

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/

祝一切顺利。

Answer 3

你做错了什么是瞄准超链接，而你只需要突出显示列表项。

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

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

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

看看自己：

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

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

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

• 将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); } 

 <ul> <li tabindex="0"> Red on<br />Hover <br /><br /> Green on<br />Click </li> <li tabindex="0"> Yellow on<br />Hover <br /><br /> Blue on<br />Click</li> </ul> 

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做了一些修改

 $(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'); }); }); 

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

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