单击后导航菜单未使用当前页面链接名称更新
[英]Navigation menu not updating with current page link name after clicked
问题描述
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 %}
Here's the issue..
问题来了。。
Toggle menu shows up OK on mobile, but it only ever shows the firstlink that appears when you first access the page.切换菜单在移动设备上显示为 OK，但它只显示第一次访问页面时出现的第一个链接。 If i click other links, page loads ok but the menu sticks at "apresentacao"...如果我单击其他链接，页面加载正常，但菜单停留在“apresentacao”...
I just copied this script from W3s and not sure if this behavior i desire to accomplish was intended, but it just feels odd that the page link isn't being updated.我刚刚从 W3s 复制了这个脚本，不确定我想要完成的这个行为是否是有意的，但是页面链接没有被更新感觉很奇怪。 Feels like the client accessing the page will get an odd feeling from this.感觉就像访问页面的客户会从中得到一种奇怪的感觉。
https://jdihzy.pythonanywhere.com/ (the problem is only on mobile) https://jdihzy.pythonanywhere.com/ （问题只在手机上）
1 个解决方案
解决方案1
0 2021-06-03 08:02:33
in CSS change it to在 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;
}
}
I would rather have an empty span element in there, where you can fill in the current open page text using JS.我宁愿在其中有一个空的 span 元素，您可以在其中使用 JS 填写当前打开的页面文本。 but this works as well!但这也有效！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.