मैं 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>
1
user16240459 12 जुलाई 2021, 17:32

3 जवाब

सबसे बढ़िया उत्तर

आप इसे :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
Nathelol 12 जुलाई 2021, 14:36

सबसे पहले, आपके वांछित परिणाम प्राप्त करने के लिए सरल उपाय हैं। दूसरा, सीखने के उद्देश्यों के लिए, मैं आपके प्रश्न का उत्तर आपके अपने कोड के संदर्भ में देना चाहूंगा।

आपकी समस्या यह है कि आप अपने <ul> के बच्चों को पुनरावृत्त और बदल रहे हैं जो <li> तत्वों का संग्रह है। लेकिन, आपका CSS आपके <li> तत्वों के भीतर <a> तत्वों को लक्षित कर रहा है। इसलिए, जब आप अपने <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>
0
Brian Scramlin 12 जुलाई 2021, 14:56

यहाँ Js का उपयोग करके एक समाधान दिया गया है। आप li टैग के बजाय a टैग के लिए एक विशेषता जोड़ सकते हैं और .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>
0
Lolpez 12 जुलाई 2021, 14:57