logo标签列表

Li元素在被单击后不保持选定状态

javascriptjquerycsshtml
7

我使用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>

1
你的代码在片段中似乎运行良好。 - Rory McCrossan
你是在说 hover 吗？我想要的是当我点击 li 项时它应该保持高亮状态。当我运行代码片段时，我没有看到这种情况发生。 - Tom
是的，没错。那是因为在 Stack Overflow 服务器上该 URL 不存在 - 它只是一个示例。 - Rory McCrossan
不，菜单在部分视图中。当我加载Team视图和UserProfile视图时，我会调用这个部分视图。 - Tom
嗨，Rory。如果你在你的端口放置一个虚拟页面，它是否能够正常工作？ - Tom
显示剩余3条评论
8个回答
6

  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>

这个例子可以运行，但我需要让html.action链接起作用。在MVC中，html.action链接是首选方法，不建议直接使用a标签并手动编写URL。 - Tom
1
@Tom 是的，我明白了。我只是使用<a>标签使代码片段能够工作，因为在你的代码片段中它并没有真正起作用，而@Html.ActionLink只是普通文本。请创建一个可工作的代码片段，例如在 https://dotnetfiddle.net 上，我会尝试帮助你。 - sergdenisov
@Tom，是的，你说得对。那么你可以使用事件委托。请看我的更新答案（我只改变了JavaScript中的第一行）。 - sergdenisov
现在我可能不需要事件委托，因为我也可以将类应用于锚标记。你之前的代码是什么？你能测试一下我的代码看看它是否能在你那里工作吗？ - Tom
让我们在聊天中继续这个讨论。 - Tom
显示剩余4条评论
2
你做错的是在定位超链接时，你需要仅突出显示列表项。
但是，如果你将代码更正为在列表中定位列表项而不是超链接，你将无法在屏幕上看到更改。（当然，你可以在浏览器的开发工具中看到类的切换）。
为什么呢？因为列表项内部的超链接会隐藏你想要看到的所有更改，当列表项被点击时。
我在.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>

我希望这有所帮助。

2
我尝试在点击函数中放置警报，但它没有触发。 - Tom
似乎在点击事件中没有添加类。 - Tom
虽然这理论上回答了问题，但最好在此处包含答案的基本部分，并提供参考链接。 - Heretic Monkey
1

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

1

如果想要实现元素的点击响应，但不需要任何脚本，可以尝试以下快速简便的方法：

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

我在我的li元素中添加了tabindex = 0。悬停效果可以，但是聚焦效果不行。不知道原因是什么。 - Tom
我为了测试将焦点设置为不同的颜色。所以当我点击时它确实会改变，但后来又回到了原来的颜色。 - Tom
1
我认为您的代码可能无法正常工作的原因是这一行。 

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

你在选择器中包含了锚点"a"，尽管你想要突出显示"li"标签。应该更像这样： 

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

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

我尝试了这个，但似乎不起作用。你能分享一下 Fiddle 的解决方案吗？ - Tom
这是 Fiddle 的解决方案。 - Louis Amon
这是fiddle的解决方案。 https://fiddle.jshell.net/mh2gqmju/3/我已经添加了一些代码来防止点击链接时的默认行为。此解决方案在选择器上使用了“a”。如果您进入解决方案并删除“a”标签，则应按预期工作。 - Louis Amon
你确定它能正常工作吗？因为我只看到鼠标悬停时有反应，而在我的情况下也是如此。我想在单击时将列表项设置为选定状态。 - Tom
我又试了一遍，非常接近但仍需要达到期望的结果。我已经注意到了一个模式。如果我在其中一个项目之间单击，则会选择其中一个项目。但是，如果我直接选择任何一个项目，则不会。因此，当我检查两个元素之间的区域时，我相信它是列表元素。所以我怀疑只有在单击li时才会发生这种情况。如何对锚标记执行相同操作？ - Tom
1
<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..
1

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

旧的 css：

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

将其翻译成中文：

修改为：

padding: 2px 1px 1px 1px ;

请看截图：enter image description here 

$(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 - 请检查上面的答案。 - prog1011
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接