Change text color when clicking Nav-link

Question

I am a student learning Django. The code I wrote is as follows, but when I run it, the text becomes bold only when I select the text margin, and when I click the text, there is no change in the text. I want the text to be bold when I click on it. What should I do? I'd appreciate it if you could tell me how.

Modified code:

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

1

How is this related to Django ? – Ram Jul 12 '21 at 14:39

score 1 · Accepted Answer · answered Jul 12 '21 at 14:36

You can achieve this with CSS alone by making use of the :focus tag.

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

This would make the links green and bold when you click on them.

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

Thank you for telling me. However, there is no change in the code whether I applied it incorrectly. I've attached the code I've modified in the text, thank you for taking a look. — , Jul 12 '21 at 14:50

score 0 · Answer 2 · answered Jul 12 '21 at 14:56

First, there are simpler solutions to achieve your desired outcome. Second, for learning purposes, I would like to answer your question within the context of your own code.

Your issue is that you are iterating and altering the children of your <ul> which is a collection of <li> elements. But, your CSS is targeting the <a> elements WITHIN your <li> elements. Therefore, when you iterate over your <li>s, you need to alter the <a> within. This can be achieved with the .firstChild read-only property since the <a> element is the "first child" of the <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>

The modified code is attached to the text. I tried to modify the code by referring to the advice you gave, but there is no change in the code whether I applied it wrong. I want the bolded text to remain when I move to a link. How can I solve this? — , Jul 12 '21 at 15:02
To clarify, your desired outcome is to have each link REMAIN GREEN after click? So, if you clicked them all they will all be green? Or, do you want each link to become green when clicked and back to normal when clicking on a new link ( like my code snippet )? — Brian Scramlin, Jul 14 '21 at 14:02
I want each link to be green when I click on it and go back to normal when I click a new link. However, I still haven't been able to solve it because it was not implemented as I wanted. Any help would be greatly appreciated. — , Jul 15 '21 at 18:02

score 0 · Answer 3 · answered Jul 12 '21 at 14:57

Here is a solution using Js. You can add an attribute for the a tags instead of the li tags and change the css rule for all a tags inside .menu-wrap

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>

Thanks for your reply. The modified code is attached to the text. I tried to modify the code by referring to the advice you gave, but there is no change in the code whether I applied it wrong. I want the bolded text to remain when I move to a link. How can I solve this? — , Jul 12 '21 at 15:02
@roboca I think you are looking for this https://stackoverflow.com/questions/7665514/django-highlight-navigation-based-on-current-page — Lolpez, Jul 12 '21 at 15:12

Change text color when clicking Nav-link

3 Answers3