CODEWITHSUNDEEP
javascriptdjangodjango-rest-frameworkdjango-viewsdjango-templates
user16240459
user16240459

Reputation:

Change text color when clicking Nav-link

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>

Upvotes: 1

Views: 1793

Answers (3)

Lolpez
Lolpez

Reputation: 879

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>

Upvotes: 0

Brian Scramlin
Brian Scramlin

Reputation: 368

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>

Upvotes: 0

Nathelol
Nathelol

Reputation: 597

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>

Upvotes: 1

Related Questions