单击后导航菜单未使用当前页面链接名称更新

Question

 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/ （问题只在手机上）

Answer 1

在 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 填写当前打开的页面文本。 但这也有效！

单击后导航菜单未使用当前页面链接名称更新

问题描述

1 个解决方案

解决方案1
0 2021-06-03 08:02:33

单击后导航菜单未使用当前页面链接名称更新

问题描述

1 个解决方案

解决方案1 0 2021-06-03 08:02:33

解决方案1
0 2021-06-03 08:02:33