使用Javascript在导航栏中突出显示当前页面
我想制作一个动态导航栏，通过突出显示与当前页面相关的图像按钮边框来识别当前页面。例如，在使用Javascript在导航栏中突出显示当前页面,javascript,Javascript,我想制作一个动态导航栏，通过突出显示与当前页面相关的图像按钮边框来识别当前页面。例如，在index.html上突出显示homeButton.jpg。我希望这是动态的，而不是静态编码。我使用的模板，我想主要内容是唯一可编辑的东西 这是我的导航栏HTML代码： <ul id="navbar"> <li><a href="../index.html" ><img id="theImg" src="../images/Buttons/homeBtn.jpg"
index.htmlhomeButton.jpg<ul id="navbar">
<li><a href="../index.html" ><img id="theImg" src="../images/Buttons/homeBtn.jpg" name="homebtn" alt="Home" border="0" /></a></li>
<li><a href="../pages/about.html"><img src="../images/Buttons/aboutBtn.jpg" alt="About" border="0" /></a></li>
<li><a href="../pages/mediapages/media.html"><img src="../images/Buttons/mediaBtn.jpg" alt="Media" border="0" /></a></li>
<li><a href="../pages/downloads.html"><img src="../images/Buttons/downloadBtn.jpg" alt="Download" border="0" /></a></li>
<li><a href="../pages/contactpages/contacts.html"><img src="../images/Buttons/contactBtn.jpg" alt="contact" border="0" /></a></li>
<li><a href="../pages/blog.html" target="_blank"><img src="../images/Buttons/blogBtn.jpg" alt="blog" border="0" /></a></li>
</ul>
我想知道有没有更好的方法来提高性能？将JS和CSS分开；首先，在CSS中禁用该样式： CSS: HTML:
<nav>
<a href="home.html">Home</a>
<a href="products.html">Products</a>
<a href="about.html">About</a>
</nav>
var url=”http://example.com/products.html“.分割（“/”）//将字符串替换为location.href
var navLinks=document.getElementsByTagName（“nav”）[0].getElementsByTagName（“a”）；
//当然，您可以使用元素以外的其他内容
var i=0；
var currentPage=url[url.length-1]；
对于（i；i将JS和CSS分开；首先，将样式设置放在CSS中：
CSS:
HTML:
<nav>
<a href="home.html">Home</a>
<a href="products.html">Products</a>
<a href="about.html">About</a>
</nav>
JS:
var url=”http://example.com/products.html“.split（“/”）//将字符串替换为location.href
var navLinks=document.getElementsByTagName（“nav”）[0].getElementsByTagName（“a”）；
//当然，您可以使用元素以外的其他内容
var i=0；
var currentPage=url[url.length-1]；
对于（i；i，您不应该在html中使用表示性标记（例如边框）
您可以在每个链接上使用唯一的id，在body元素上使用匹配的类标识符，并使用CSS应用边框样式
虽然它不是完全动态的，但类似于：
HTML:
<body class="home">
您的主要挑战是获取当前页面文件名。如果您正在/计划使用服务器端脚本，并且在URL中附加了变量，例如？p=45252463&x=234，则可能会有点粘
我发现这应该有帮助：
您的html中不应该有表示性标记（例如边框）
您可以在每个链接上使用唯一的id，在body元素上使用匹配的类标识符，并使用CSS应用边框样式
虽然它不是完全动态的，但类似于：
HTML:
<body class="home">
您的主要挑战是获取当前页面文件名。如果您正在/计划使用服务器端脚本，并且在URL中附加了变量，例如？p=45252463&x=234，则可能会有点粘
我发现这应该有帮助：
这为我带来了好处：
var domain = '{{ DOMAIN }}'; // www.example.com or dev.example.com
var domain_index = window.location.href.indexOf(domain);
var long_app_name = window.location.href.slice(domain_index+domain.length+1);
// this turns http://www.example.com/whatever/whatever to whatever/whatever
app_name = long_app_name.slice(0, long_app_name.indexOf('/'));
//now you are left off with just whatever
然后使用jquery添加活动类
$('nav a[href*="' + app_name+'"]').closest('li').addClass('active');
当然还有css：
.active{background:red;}
如果您的html如下所示，则此操作有效：
<ul><li><a href="ee">ee</a></li><li><a href="dd">dd</a></li></ul>
如果你在www.somesite.com/ee-thaen-ee中的应用程序是“应用程序”，那么这将自动使用页面url添加活动类，并将背景颜色设置为红色，它将处于活动状态
var domain = '{{ DOMAIN }}'; // www.example.com or dev.example.com
var domain_index = window.location.href.indexOf(domain);
var long_app_name = window.location.href.slice(domain_index+domain.length+1);
// this turns http://www.example.com/whatever/whatever to whatever/whatever
app_name = long_app_name.slice(0, long_app_name.indexOf('/'));
//now you are left off with just whatever
然后使用jquery添加活动类
$('nav a[href*="' + app_name+'"]').closest('li').addClass('active');
当然还有css：
.active{background:red;}
如果您的html如下所示，则此操作有效：
<ul><li><a href="ee">ee</a></li><li><a href="dd">dd</a></li></ul>
这将使用页面url自动添加活动类，如果您在www.somesite.com/ee thaen ee中的应用程序是“应用程序”，则背景颜色将为红色，并且将处于活动状态感谢您的回复。我遇到的主要问题是拆分位置。href，现在我知道如何根据我的情况正确拆分代码更小，性能更好谢谢你的回复。我遇到的主要问题是拆分位置。href，现在我知道如何根据我的情况正确拆分代码。代码更小，性能更好。@Sam乐于帮助；如果这解决了你的问题，请确保单击绿色复选框以标记为答案。@Sam乐于帮助；确保单击绿色复选框以标记a如果这解决了您的问题，请回答。过早优化是万恶之源。在获得功能之前，请将性能问题放在一边。过早优化是万恶之源。在获得功能之前，请将性能问题放在一边。