Question

我不是一个真正的网络程序员，也不是一个说英语的人，所以如果我说了一些不合逻辑的话，请原谅自己。

我正在尝试根据活动的网址在导航的每个'li'项目上添加一个图标类，我不知道它是否重要，但我使用的是Twitter bootstrap。 HMTL：

<ul class="nav">
   <li class="active"><a href="index.html">Inici</a></li>
   <li><a href="servi.html">Serveis</a></li>
   <li><a href="acti.html">Activitats</a></li>
   <li><a href="contact.html">Contacte</a></li>
   <li id="date"><i class="icon-calendar"></i></li>
</ul>

Javascript：

function activeLinkNav(){

  var href = location.href.toLowerCase();
  var separa = href.split('/'); // cut the string on '/'
  var lastUri = separa[separa.length-1]; // accessing last item [separa]


$('.nav li a').each(function(){
    if (href.indexOf(this.href.toLowerCase())> -1){

        switch (true){

            case lastUri == 'index.html':
                $(this).prepend('<span><i class="icon-home"></i></span>');
                break;

            case lastUri == 'servi.html':
                $(this).prepend('<span><i class="icon-user-md"></i></span>');
                break;

            case lastUri.indexOf('acti.html')!== -1:
                $(this).prepend('<span><i class="icon-group"></i></span>');
                break;

            case lastUri == 'contact.html':
                $(this).prepend('<span><i class="icon-envelope"></i></span>');
                break;
        }

    } else $(this).prepend('<i class="icon-double-angle-right"></i>');
});
}

一切正常，除非我访问根域，调试我的代码，我看到lastUri =“”;那么，为什么我这样说：

            case lastUri == "":
                $(this).prepend('<span><i class="icon-home"></i></span>');
                break;

代码无效？

我尝试了很多东西，但这是我的全部知识，任何想法？

有问题的网站：

http://residencia-geriatrica-ergos.com/

谢谢！

Answer 1

因为if (href.indexOf(this.href.toLowerCase())> -1) 不会是真的。 href将等于“http://residencia-geriatrica-ergos.com/” 并且this.href将等于“index.html”，因此在href。

中找不到它

我的建议：

$(window).load(function() {
  var href = location.href.toLowerCase();
  switch(href):
     case 'http://residencia-geriatrica-ergos.com/':
       $('a[href="index.html"]').prepend('<span><i class="icon-home"></i></span>'); //append active icon
       $('li:not(.active) a').prepend('<i class="icon-double-angle-right"></i>'); //append standard icons
     break;
     case 'http://residencia-geriatrica-ergos.com/index.html':
       $('a[href="index.html"]').prepend('<span><i class="icon-home"></i></span>');
       $('li:not(.active) a').prepend('<i class="icon-double-angle-right"></i>'); //append standard icons
     break;
     case 'http://residencia-geriatrica-ergos.com/servi.html':
       $('a[href="servi.html"]').prepend('<span><i class="icon-home"></i></span>');
       $('li:not(.active) a').prepend('<i class="icon-double-angle-right"></i>'); //append standard icons
     break;
   //add other

在基于URL的nav上添加icon-class

1 个答案: