单击导航链接时更改文本颜色答案

【问题标题】：Change text color when clicking Nav-link单击导航链接时更改文本颜色
【发布时间】：2021-09-21 17:28:22
【问题描述】：

我是一名学习 Django 的学生。我写的代码如下，但是运行的时候，只有选中文本边距时，文本才会变为粗体，点击文本时，文本没有变化。当我点击它时，我希望文本是粗体的。我该怎么办？如果你能告诉我怎么做，我将不胜感激。

修改后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    {% block script %}
    {% endblock %}

    {% block style %}
    {% endblock %}

<style>
.menu-wrap a:focus{
    color:green;
}

.menu-wrap a:focus{
    color:green;
}

.menu-wrap li{
    display: inline-block;
    padding: 10px;}
 </style>

</head>
  <body>

    {% load static %}
    <link rel="stylesheet" href="{% static 'main.css' %}">

    <div class="text-center navbar navbar-expand-md navbar-light">
        <a class="navbar-brand" href="/" style="margin-top:30px;">ZERONINE</a>
        <button class="navbar-toggler" style="margin-top:30px;" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>

    <nav class="navbar navbar-expand-lg">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">


       <ul class="menu-wrap" style="margin: auto;">
          <li class="nav-link"><a href="/">전체상품</a></li>
           {% for c in categories %}
          <li class="nav-link"><a href="{{c.get_absolute_url}}" class="nav-link {% if current_category.slug == c.slug %}active{% endif %}" >{{c.name}}</a></li>
                   {% endfor %}
       <li class="nav-link"><a href="{% url 'zeronine:login' %}" class="nav-link" style="color: black;">로그인</a></li>
    <li class="nav-link"><a href="{% url 'zeronine:register' %}" class="nav-link" style="color: black;">회원가입</a></li>
       </ul>

  </div>
</nav>

<div class="container">
    {% block content %}
    {% endblock %}
</div>
</body>

</html>

【问题讨论】：

这和 Django 有什么关系？

标签： javascript django django-rest-framework django-views django-templates

【解决方案1】：

您可以通过使用 :focus 标签单独使用 CSS 来实现这一点。

.menu-wrap a:focus{
    color:green;
    font-weight: 600;
}

当您单击链接时，这将使链接变为绿色和粗体。

.menu-wrap a:focus{
    color:green;
    font-weight: 600;
}

.menu-wrap li{
    display: inline-block;
    padding: 10px;}

<ul class="menu-wrap">
      <li class="nav-link"><a href="#">link1</a></li>
      <li class="nav-link"><a href="#">link2</a></li>
      <li class="nav-link"><a href="#">link3</a></li>
      <li class="nav-link"><a href="#">link4</a></li>
  </ul>

【讨论】：

谢谢你告诉我。但是，无论我是否错误地应用它，代码都没有变化。我已将我修改过的代码附在文中，谢谢大家看看。

【解决方案2】：

首先，有一些更简单的解决方案可以实现您想要的结果。其次，出于学习的目的，我想在您自己的代码上下文中回答您的问题。

您的问题是您正在迭代和更改 <ul> 的子代，这是 <li> 元素的集合。但是，您的 CSS 的目标是 <a> 元素内的 <li> 元素。因此，当您迭代您的<li>s 时，您需要更改其中的<a>。这可以通过.firstChild 只读属性来实现，因为<a> 元素是<li> 的“第一个子元素”。

const menuWrap = document.querySelector('.menu-wrap');

function select(ulEl, aEl) {
  Array.from(ulEl.children).forEach(
    (v) => {
      v.firstChild.classList.remove('selected');
    }
  );
  if (aEl) aEl.classList.add('selected');
}

menuWrap.addEventListener('click', e => {
  const selected = e.target;
  select(menuWrap, selected);
});

.menu-wrap li {
  display: inline-block;
  padding: 10px;
}

.menu-wrap a.selected {
  color: green;
  font-weight: 600;
}

<ul class="menu-wrap">
  <li class="nav-link"><a href="#">link1</a></li>
  <li class="nav-link"><a href="#">link2</a></li>
  <li class="nav-link"><a href="#">link3</a></li>
  <li class="nav-link"><a href="#">link4</a></li>
</ul>

【讨论】：

文中附上修改后的代码。我尝试参考您给出的建议修改代码，但无论我是否应用错误，代码都没有变化。我希望在移动到链接时保留粗体文本。我该如何解决这个问题？
澄清一下，您想要的结果是让每个链接在点击后保持绿色？那么，如果你全部点击它们，它们都会变成绿色吗？或者，您是否希望每个链接在单击时变为绿色并在单击新链接时恢复正常（如我的代码 sn-p ）？
我希望每个链接在单击时都变为绿色，并在单击新链接时恢复正常。但是，我仍然无法解决它，因为它没有按我的意愿实施。任何帮助将不胜感激。

【解决方案3】：

这是一个使用 Js 的解决方案。您可以为a 标签添加属性而不是li 标签，并更改.menu-wrap 内所有a 标签的css 规则

const menuWrap = document.querySelectorAll('.menu-wrap a');

for (var i = 0; i < menuWrap.length; i++) {
    menuWrap[i].addEventListener('click', select, false);
}

function select(){
  //remove previous selected menus
  for (var i = 0; i < menuWrap.length; i++) {
      menuWrap[i].removeAttribute('selected');
  }
  this.setAttribute("selected", "true"); 
}

.menu-wrap li{
    display: inline-block;
    padding: 10px;
}

.menu-wrap a[selected]{
    color:green;
    font-weight: 600;
}

<ul class="menu-wrap">
    <li class="nav-link"><a href="#">link1</a></li>
    <li class="nav-link"><a href="#">link2</a></li>
    <li class="nav-link"><a href="#">link3</a></li>
    <li class="nav-link"><a href="#">link4</a></li>
</ul>

【讨论】：

感谢您的回复。修改后的代码附在正文中。我尝试参考您给出的建议修改代码，但无论我是否应用错误，代码都没有变化。我希望在移动到链接时保留粗体文本。我该如何解决这个问题？
@roboca 我想你正在寻找这个stackoverflow.com/questions/7665514/…