问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使用 Javascript 在导航栏中突出显示当前页面

社区维基
1
新手上路，请多包涵

我想制作一个动态导航栏，它可以通过突出显示与其所在页面相关的图像按钮边框来识别当前页面。例如，在 index.html homeButton.jpg 上突出显示了 —。我希望这是动态的而不是静态编码的。我正在使用模板 我希望主要内容是唯一可编辑的内容。

这是我的导航栏 HTML 代码：

 <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>

和 JavaScript 代码：

 var examplehtml = [['http://example.com/'],['http://www.example.com/']];
var navRoot = document.getElementById("navbar").getElementsByTagName("img");
var currentpage = document.location.href;
if(currentpage == examplehtml [0] || currentpage == examplehtml [1] ){
  navRoot[0].src = "../images/Buttons/homeBtn2.jpg";
  return;
}

var indexpage = currentpage.search(/index.html/);
var aboutpage = currentpage.search(/about.html/)
var mediapage = currentpage.search(/mediapages/);
var downloadpage = currentpage.search(/downloads.html/);
var contactpage = currentpage.search(/contacts.html/);
var commentsentpage = currentpage.search(/comment_sent.html/);

if(indexpage>-1){navRoot[0].src = "../images/Buttons/homeBtn2.jpg";return;}
if(aboutpage>-1){navRoot[1].style.border='1px solid #fff';return;}
else if(mediapage>-1){navRoot[2].style.border='1px solid #fff';return;}
else if(downloadpage>-1){navRoot[3].style.border = '1px solid #fff';return;}
else if(contactpage>-1){navRoot[4].style.border='1px solid #fff';return;}
else if(commentsentpage>-1){navRoot[4].style.border = '1px solid #fff';return;}
}
window.onload = Getcurrentpage;

我想知道是否有更好的方法来执行此操作或我可以做些什么来提高性能？

原文由 Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascript
阅读 597
2 个回答
得票最新
社区维基
1
✓ 已被采纳

将你的 JS 和 CSS 分开；首先将样式放在 CSS 中： CSS：

   .current {
    color:red;
    border:1px solid red;
  }

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".split("/"); //replace string with location.href
var navLinks = document.getElementsByTagName("nav")[0].getElementsByTagName("a");
//naturally you could use something other than the <nav> element
var i=0;
var currentPage = url[url.length - 1];
for(i;i<navLinks.length;i++){
  var lb = navLinks[i].href.split("/");
  if(lb[lb.length-1] == currentPage) {
   navLinks[i].className = "current";

  }
  }

这是一个 活生生的例子。

原文由 Thomas Shields 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

你不应该在你的 html 中有表示性标记（例如边框）。

您可以在每个链接上使用唯一 ID，在 body 元素上使用匹配的类标识符，并使用 CSS 应用边框样式。

虽然它不完全是动态的，但类似于：

HTML:

 <body class="home">


 <a href="home.html" id="home">

CSS：

 .home a#home {

     border-color: red;
}

您的主要挑战是获取当前页面文件名。如果您正在/计划使用服务器端脚本并将变量附加到您的 URL，例如 ?p=45252463&x=234，它可能会有点棘手

我发现了这个，应该有帮助：

http://www.richnetapps.com/automatically_highlight_current_page_in/

原文由 eddyrolo 发布，翻译遵循 CC BY-SA 3.0 许可协议

查看全部 2 个回答
推荐问题