Question

我是一名学习 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>

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

Answer 2

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

您的问题是您正在迭代和更改 <ul> 的子元素，<li> 是 <a> 元素的集合。但是，您的 CSS 的目标是 <li> 元素内的 <li> 元素。因此，当您迭代 <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>

{{1}}

Answer 3

这是一个使用Js的解决方案。您可以为 a 标签而不是 li 标签添加一个属性，并更改 a

中所有 .menu-wrap 标签的 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>

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

3 个答案: