javascript - 单击后导航菜单未使用当前页面链接名称更新
问题描述
function myFunction () {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
let current_url = document.location;
document.querySelectorAll(".topnav .btn").forEach(function(e){
if(e.href == current_url){
e.classList +=" current";
}
});
body, html {
margin-left:5%;
margin-right:5%;
margin-bottom:1%;
margin-top:1%;
}
.logopos {
text-align:center;
}
p {
text-align: center;
color: red;
}
.topnav {
background-color: #333;
overflow: hidden;
border-radius:5px;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;
font-family:"Lucida Console", monospace;
}
/* Add an active class to highlight the current page */
.btn {
color:white;
}
.btn.current {
background-color:#f58a42;
color: white;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!doctype html>
<html>
{% load static %}
<div class="topnav" id="myTopnav">
<a class ="btn"href="{% url 'project_index' %}">Apresentação</a>
<a href="#news">Formação</a>
<a class = "btn" href="{% url 'form_page' %}">Cadastro</a>
<a href="#about">Contato</a>
<a class = "icon" href="javascript:void(0);" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Profissional da área de psicopedagogia" content="Pagina Oficial">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
</body>
</html>
{% block page_content %}{% endblock %}
问题来了。。
切换菜单在移动设备上显示为 OK,但它只显示第一次访问页面时出现的第一个链接。如果我单击其他链接,页面加载正常,但菜单停留在“apresentacao”...
我刚刚从 W3s 复制了这个脚本,不确定我想要完成的这个行为是否是有意的,但是页面链接没有被更新感觉很奇怪。感觉就像访问页面的客户会从中得到一种奇怪的感觉。
https://jdihzy.pythonanywhere.com/(问题只在手机上)
解决方案
在 CSS 中将其更改为
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a {display: none;}
.topnav a.current {display: block;} /* change to this so that only the current class is displayed */
.topnav a.icon {
float: right;
display: block;
}
}
我宁愿在其中有一个空的 span 元素,您可以在其中使用 JS 填写当前打开的页面文本。但这也有效!
推荐阅读
- visual-studio - 使用 Scons 设置 Visual Studio 特定选项
- javascript - React-new-window,如何定位弹出窗口?
- javascript - !important css 标签在测试期间抛出 Webpack 配置错误
- r - 将每一列添加到新数据框中
- sql - SQL Server中的自定义表查询类似于SPSS中的自定义表?
- android - 恢复应用程序时如何禁用DialogFragment过渡动画?
- docker - docker-compose up -d 失败
- python - 如何在for循环中重复n次操作
- flutter - PlatformException(400, HTTP 状态码错误。, null)
- c++ - 如何将 STD::filesystem::recursive_directory_iterator 与相对路径一起使用?