Question

我试图解决主题行中提出的问题。以下是我正在尝试完成的HTML和jQ。

HTML


<ul class="topnav1">
   <li class="highlight">
      <a  href="index.php">Home</a>
   </li>
   <li>
      <a  href="testimonials_page.php">Testimonials</a>
   </li>
   <li>
      <a href="services.php">Services</a>
   </li>
   <li>
      <a href="contact_page.php">Contact  Us</a>
   </li>
</ul>

JQ


<script type='text/javascript'>
//Menu highlights.
$(document).ready(function(){
   var pathname =  (window.location.pathname.match(/[^\/]+$/)[0]);
   $(".topnav1 li a").each(function() {
      if ($(this).attr('href')==pathname) {
         $("li.highlight").removeClass("highlight");
         $(this).parent().parent().addClass("highlight");
      }
   });
   $("li.highlight"').parents().each(function(){
      if ($(this).is("li")){
         $(this).addClass("highlight");
      }
   });
});
</script>

我们的想法是从默认列表项中删除突出显示的类，并将其分配给href属性与当前url匹配的列表项。我必须承认我不是最好的编程匹配模式，所以我有点不知道如何只匹配部分网址与href属性，我不知道这就是为什么我的代码不是工作（突出显示保留在主菜单项上，不适用于其他菜单项）。有什么想法吗？

Answer 1

我建议如下：

// in real life use: var curURL = document.location.toString();
var curURL = 'http://fiddle.jshell.net/_display/testimonials_page.php';

$('.topnav1 li.highlight').removeClass('highlight');
$('.topnav1 li a').each(
    function(){
        if (curURL.indexOf(this.href) != -1){
            $(this).closest('li').addClass('highlight');
        }
    });

JS Fiddle demo

参考文献：

JavaScript，位于Mozilla Developer Network的JavaScript资源：
- document.location。
- document.URL。
- indexOf()。
- toString()。
jQuery，来自jQuery API：
- addClass()。
- closest()。
- each()。
- removeClass()。

Answer 2

通过执行以下操作可以获得相同的结果：

var filename = window.location.pathname.match(/[^\/]+$/)[0];
$('li.highlight').removeClass('highlight');
$('ul.topnav1 li a[href="' + filename + '"]').parents('li').addClass('highlight');

由于您可以使用jQuery属性选择器，您可以进行严格检查并让jQuery完成工作，tag[attribute="value"]

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添加类激活

$（＆＃39;导航a [href * =＆＃34;＆＃39; + app_name +＆＃39;＆＃34;]＆＃39;）。最近（＆＃39; li＆＃39; ;）addClass（＆＃39;有源＆＃39）;

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

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

3 个答案: