javascript - 单击超链接更改列表元素的颜色-6ren

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

转载作者：行者123 更新时间：2023-12-02 21:34:58

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

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

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

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

最佳答案

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

关于javascript - 单击超链接更改列表元素的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60523633/

文章推荐： javascript - 使用 Javascript 禁用表单按钮和字段

文章推荐： javascript - 将 HTML 响应转换为数组或 NodeJS 中的对象

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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