单击导航链接时更改文本颜色
Posted
技术标签:
【中文标题】单击导航链接时更改文本颜色【英文标题】：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 有什么关系？ 【参考方案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 我想你正在寻找这个***.com/questions/7665514/…以上是关于单击导航链接时更改文本颜色的主要内容，如果未能解决你的问题，请参考以下文章