Question

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

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

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

我尝试更改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>

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

Answer 2

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

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

希望它会对您有所帮助。

Answer 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");
      });
});

Answer 4

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

Answer 5

我的建议是：

1）在列表项而不是链接上切换类名.visited，因此您可以通过{来控制<li>的背景颜色和<a>元素的颜色{1}}；

2）使用事件委托并仅检测CSS元素上的click事件，并避免使用内联.box处理程序或多个click事件（ click）;

3）正确设置$('a').click(...)规则的特异性：由于您使用

定义了黑色

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

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

5 个答案: