Question

我想创建一个动态导航栏，通过突出显示与其所在页面相关的图像按钮边框来识别当前页面。例如，在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;

我想知道是否有更好的方法可以做到这一点或我可以做些什么来提高性能？

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

JS：

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

  }
  }

这是live example。

Answer 2

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

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

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

HTML：

<body class="home">

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

CSS：

.home a#home {

     border-color: red;
}

您的主要挑战是获取当前页面文件名。如果您打算使用服务器端脚本并将变量附加到您的URL，例如？p = 45252463＆amp; x = 234

，它会变得有点粘。

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

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

Answer 3

这对我有用：

  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是＆＃39; app＆＃39;这将使用页面网址自然地添加课程活动并将你的背景颜色设为红色。它将是活跃的

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

3 个答案: