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

时间:2011-12-12 19:11:00

标签: jquery

我试图解决主题行中提出的问题。以下是我正在尝试完成的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属性,我不知道这就是为什么我的代码不是工作(突出显示保留在主菜单项上,不适用于其他菜单项)。有什么想法吗?

3 个答案:

答案 0 :(得分: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

参考文献:

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

这对我有用:

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