共享标题菜单上的AddClass（'selected'）

我在header.php中创建了一个菜单，它将包含在每个文件中，如index.php或contact-us.php。共享标题菜单上的AddClass（'selected'）

我现在唯一的问题是将选中的添加到菜单中所选的主类别。下面的代码基本上工作，直到加载选定的页面，之后，选定的属性被删除。

你能帮我解决这个问题吗？

HTML

<nav id="navigation"> 
<ul id="navtop"> 
    <li class=" first has_navchild" id="Home"> 
     <a href="index.php">Home</a> 
     <ul class="submenu"> 
      <li class=" first has_navchild"> 
       <a href="index.php">Home</a> 
      </li> 
      <li class=" last"> 
       <a href="who-we-are.php">Who we are</a> 
      </li> 
     </ul> 
    </li> 
    <li class=" has_navchild" id="Contacts"> 
     <a href="contacts.php">Contacts</a> 
     <ul class="submenu"> 
      <li class=" first has_navchild"> 
       <a href="where.php">Where we are</a> 
      </li> 
      <li class=" last"> 
       <a href="form.php">Contact form</a> 
      </li> 
     </ul> 
    </li> 
</ul>

jQuery的

$(document).ready(function() { 
    $('#navigation ul li').click(function(event){ 
     event.preventDefault(); 
     if(($(this).attr("id") === "Home")) 
     { 
      alert($(this).attr('id')); 
      $("#navigation ul li#Contacts").removeClass("selected"); 
      $("#navigation ul li#Home").addClass("selected"); 
     } 
     else if($(this).attr("id") === "Contacts") 
     { 
      alert($(this).attr('id')); 
      $("#navigation ul li#Home").removeClass("selected"); 
      $("#navigation ul li#Contacts").addClass("selected"); 
     } 
    });  
});

感谢您的帮助

来源

2014-01-08 Mark

当您加载新页面时，没有发生点击事件，因此没有选择元素。 – Abhishek

由于重新加载菜单，加载页面时将删除所选属性。除非您可以将选定的选项以某种方式存储在服务器上并在加载标题时检索它，否则没有办法解决此问题。 – Nunners

让您的服务器端脚本在页面加载时添加正确的类。 – PeeHaa

我用这个方法：

$(window).load(function() { 
        var url = window.location; 
        $('#navtop a').filter(function() { 
         return this.href == url; 
        }).parents("li").addClass('selected'); 

      });

它检查当前加载的页面并自动将'selected'类别添加到其父项<li>

来源

2014-01-08 13:00:09

固定。谢谢大家的帮助！ – Mark

这是正常的，你的文件准备好装载WH全部加载完毕后，您使用事件onclick，但事实上没有人点击过...所以没有附加。

第一次使用此代码对负载添加善类：

$(document).ready(function() { 
     if(($(this).attr("id") === "Home")) 
     { 
      $("#navigation ul li#Home").addClass("selected"); 
     } 
     else if($(this).attr("id") === "Contacts") 
     { 
      $("#navigation ul li#Contacts").addClass("selected"); 
     } 
    });

而且后点击功能添加...

$('#navigation ul li').click(function(event){ 
     event.preventDefault(); 
     if(($(this).attr("id") === "Home")) 
     { 
      $("#navigation ul li#Contacts").removeClass("selected"); 
      $("#navigation ul li#Home").addClass("selected"); 
     } 
     else if($(this).attr("id") === "Contacts") 
     { 
      $("#navigation ul li#Home").removeClass("selected"); 
      $("#navigation ul li#Contacts").addClass("selected"); 
     } 
    });

来源

2014-01-08 12:53:07 keegzer

共享标题菜单上的AddClass（'selected'）

回答

相关问题