Li 元素在单击时未保持选中状态答案

【问题标题】：Li element not remaining selected on the click of itLi 元素在单击时未保持选中状态
【发布时间】：2017-07-26 14:33:11
【问题描述】：

我创建了一个带有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>

【问题讨论】：

您的代码似乎在 sn-p 中运行良好。
你说的是悬停吗？我想要的是当我单击 li 项目时它应该保持突出显示。当我运行 sn-p 时，我没有看到这种情况发生
您是否打算在单击链接时加载新页面？
我在“/”应用程序中收到错误服务器错误。无法找到该资源。因此看不到按钮
嗯，是的。这是因为该 URL 在 Stack Overflow 服务器上不存在 - 这是一个示例。

标签： javascript jquery css html

【解决方案1】：

您应该阅读CSS Specificity：您的.highlightMenu {} 选择器将永远不会被应用，因为.#navcontainer ul li {} 选择器更具体。首选Class selectors，查看BEM methodology。
来自 MDN 关于!important：

然而，使用!important 是不好的做法，应该避免使用，因为它会破坏样式表中自然的cascading，从而使调试变得更加困难。当两个具有!important 规则的冲突声明应用于同一元素时，将应用具有更高特异性的声明。
如果你想在点击<a>时将.highlightMenu类设置为<li>，你可以使用jQuery .closest()。
如果动态添加列表项，可以使用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>

【讨论】：

此示例有效，但我需要使 html.action 链接正常工作。 html.action 链接是 MVC 中的首选方式，不建议直接使用 a 标签并手动编写 url。
@Tom 是的，我明白了，我使用 <a> 只是为了让 sn-p 工作，因为在你的 sn-p 中它并没有真正工作，@Html.ActionLink 那里 - 只是纯文本.请创建有效的 sn-p，例如，在这里 — dotnetfiddle.net，我会尽力帮助您。
@Tom 同样，您可以简单地尝试使用我的 HTML/CSS/jQuery 代码并将我的 <a> 元素更改为您的 @Html.ActionLinks，但将 CSS 类 nav__link 添加到它们。有关将 CSS 类添加到 @Html.ActionLink 的信息，请参阅 this topic。
在您的代码中，您已经为 li 和标签设置了类。我在 li 里面只有一个 html.action。当 a 标签在运行时生成时，如何设置 a 标签的类
@Tom 是的，你是对的。然后你可以使用Event Delegation。查看我更新的答案（我只更改了 Javascript 中的第一行）。

【解决方案2】：

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

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

一切顺利。

【讨论】：

我尝试在点击功能中设置警报，但它没有触发。
点击事件好像没有添加类
虽然理论上这可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。

【解决方案3】：

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

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

为什么会这样？因为列表项内的超链接隐藏了您希望在单击列表项时看到的所有更改。

我在.highlightMenu 中添加了一个 CSS 属性，以便让您注意到这些变化。

看看你自己：

JavaScript 被修改为针对列表项，而不是#navcontainer 中的ul 中的超链接
.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>

希望对你有所帮助。

【讨论】：

【解决方案4】：

对于一个快速简单的 hack，它允许元素在单击时做出响应，但不需要任何脚本：

给元素添加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>

【讨论】：

我将 tabindex = 0 添加到我的 li 元素中。悬停有效，但焦点无效。不知道是什么原因
我为焦点设置了不同的颜色来测试。所以当我点击它时它确实会改变，但它稍后会变成原来的颜色

【解决方案5】：

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

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

您已经在选择器中包含了锚点 "a"，尽管您希望突出显示 "li" 标记。它应该更像这样：

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

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

【讨论】：

我试过了，但它似乎不起作用。你能分享一下小提琴独奏吗
这里是小提琴解决方案。
这里是小提琴解决方案。 fiddle.jshell.net/mh2gqmju/3 我在代码中添加了一些东西来防止点击链接的默认行为。此解决方案在选择器上有“a”。如果您转到解决方案并删除“a”标签，这应该可以按预期工作
你确定它有效吗，因为我只能看到它在我的情况下所做的悬停工作。我正在考虑将列表项设置为单击时选中
我又试了一次。非常接近但仍需要达到预期的结果。我注意到了一个模式。如果我在其中一项之间单击，则选择其中一项。但是，如果我直接选择任何一项，则不会。因此，当我检查两个元素之间的区域时，我相信它是列表元素。所以我怀疑的是，只有点击 li 才会发生。如何对锚标签也做同样的事情

【解决方案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..

【讨论】：

【解决方案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>

【讨论】：

@Tom - 请检查上述答案

【解决方案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>

【讨论】：