单击超链接更改列表元素的颜色答案

【问题标题】：Change Color of List element on click of hyperlink单击超链接更改列表元素的颜色
【发布时间】：2020-03-04 10:11:26
【问题描述】：

我的一个项目中有以下代码。它显示菜单项。我想要的是，当有人单击在特定列表项中找到的链接时，该特定列表项的背景颜色应该会改变。

这里我使用灰色进行演示。

当用户单击另一个列表项时，先前单击的列表项应恢复为原始颜色，当前列表项应变为灰色。除此之外，我希望将当前选定列表项的文本更改为白色。

我尝试更改a:visited 的样式，但没有成功。

任何帮助将不胜感激。

$('a').click(function(){
   $(this).addClass("visited");
});

ul {
      list-style-type: none;
}

.box li a {
      font-size: 18px;
      text-decoration: none;
      color: black;
      padding-left: 15px;
      display: block;
      height: 60px;
      line-height: 60px;
}

.box li.active {
      background-color: #ad2a2a;
      font-weight: bold;
      color: white;

}

.box li:hover {
      background-color: rgba(198, 19, 52, 0.4);
}

.box li {
      background-color: #e3e2e2;
      margin-bottom: 1px;
      position: relative;
      transition: .2s;
      margin-right: 10px;

}

a.visited {
      color: #ffffff;
}


    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>

    <ul class="box">
    <li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 1</a></li>
    <li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 2</a></li>
    <li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 3</a></li>
    <li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 4</a></li>
    <li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 5</a></li>
    </ul>

【问题讨论】：

使用 $("a").removeClass("visited");在添加类行之前。它会在分配新的之前删除所有突出显示的

标签： javascript jquery html css

【解决方案1】：

更改 CSS 和 Jquery

.box li.visited{
  background:gray;
}
.box li.visited a{
    color: #ffffff;
}

$('a').click(function(){
    $('.box li').removeClass("visited");
    $(this).parent().addClass("visited");
});

ul {
list-style-type: none;
}

.box li a {
  font-size: 18px;
  text-decoration:none;
  color: black;
  padding-left: 15px;
  display: block;
  height: 60px;
  line-height: 60px;
}

.box li.active {
  background-color: #ad2a2a;
  font-weight: bold;
  color: white;
  
}

.box li:hover {
  background-color: rgba(198, 19, 52, 0.4);
}

.box li {
  background-color: #e3e2e2; 
  margin-bottom: 1px;
  position: relative;
  transition: .2s;
  margin-right: 10px;
  
}
.box li.visited{
  background:gray;
}
.box li.visited a{
    color: #ffffff;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<ul class="box">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
</ul>

【讨论】：

【解决方案2】：

您只需要对 html 和 Jquery 代码进行一些小调整，请参见下面的代码 sn-p：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<style>
ul {
list-style-type: none;
}

.box li a {
  font-size: 18px;
  text-decoration:none;
  color: black;
  padding-left: 15px;
  display: block;
  height: 60px;
  line-height: 60px;
}

.box li.active {
  background-color: #ad2a2a;
  font-weight: bold;
  color: white !important;
  
}

.box li:hover {
  background-color: rgba(198, 19, 52, 0.4);
}

.box li {
  background-color: #e3e2e2; 
  margin-bottom: 1px;
  position: relative;
  transition: .2s;
  margin-right: 10px;
  
}

a.visited{
    color: #ffffff !important;
}
</style>
 <ul class="box">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
    <li><a href="#">Menu Item 5</a></li>
  </ul>
  <script>
    $('a').click(function(){
      $('a').removeClass("visited");
      $('a').parents("li").removeClass("active");
      $(this).addClass("visited");
       $(this).parents("li").addClass("active");
    });
</script>
</body>
</html>

希望对你有所帮助。

【讨论】：

【解决方案3】：

删除 onclick="this.style.backgroundColor = 'grey';" 这不是一个好习惯。

修改css为

a.visited{
    color: #ffffff;
    background-color:grey;
}

修改js为

$(document).ready(function(){
      $('a').click(function(){
        $('a').removeClass("visited");// remove class for all
        $(this).addClass("visited");
      });
});

【讨论】：

【解决方案4】：

我的建议是：

1) 在列表项而不是链接上切换类名.visited，这样您就可以通过CSS 控制<li> 的背景颜色和<a> 元素的颜色；

2) 使用 事件委托 并仅检测一次 .box 元素上的点击事件，避免使用内联 click 处理程序或多个 click 事件（就像 @987654328 发生的那样@);

3) 正确设置CSS 规则的特异性：因为您使用

定义了黑色

.box li a { }

你需要用一个至少相等的选择器覆盖属性（这就是为什么a.visited{...} 不起作用）。

document.querySelector('.box').addEventListener('click', function(ev) {
    if (ev.target.matches('a')) {
         ev.preventDefault();
         if (!!document.querySelector('.visited')) {
             document.querySelector('.visited').className = '';
         }
         ev.target.parentNode.classList.add('visited');
    }
    
});

ul {
list-style-type: none;
}

.box li a {
  font-size: 18px;
  text-decoration:none;
  color: black;
  padding-left: 15px;
  display: block;
  height: 60px;
  line-height: 60px;
}

.box li.active {
  background-color: #ad2a2a;
  font-weight: bold;
  color: white;
  
}

.box li:hover {
  background-color: rgba(198, 19, 52, 0.4);
}

.box li {
  background-color: #e3e2e2; 
  margin-bottom: 1px;
  position: relative;
  transition: .2s;
  margin-right: 10px;
  
}


.box li.visited {
    background: gray;
}

.box li.visited a {
    color: #ffffff;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<ul class="box">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
</ul>

【讨论】：

很好的解释。效果很好。谢谢你。顺便问一下，如何使第一个列表元素在页面加载时以相同的突出显示被选中？
只需在第一个列表项上应用访问的类

【解决方案5】：

$('a').click(function() {
  $('li').removeClass("visited");
  $(this).parent().toggleClass("visited");
});

ul {
  list-style-type: none;
}

.box li a {
  font-size: 18px;
  text-decoration: none;
  color: black;
  padding-left: 15px;
  display: block;
  height: 60px;
  line-height: 60px;
}

.box li.active {
  background-color: #ad2a2a;
  font-weight: bold;
  color: white;
}

.box li:hover {
  background-color: rgba(198, 19, 52, 0.4);
}

.box li {
  background-color: #e3e2e2;
  margin-bottom: 1px;
  position: relative;
  transition: .2s;
  margin-right: 10px;
}

.box li.visited {
  background-color: gray;
}

.box li.visited a {
  color: #ffffff;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>

  <ul class="box">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
    <li><a href="#">Menu Item 5</a></li>
  </ul>

【讨论】：

它没有用。点击后所有列表项都变为灰色背景。
和我一起，只点了一个变灰了？！