导航问题与jQuery

Question

我的问题如下：

我有一个简单的导航

<ul class="navigation"> 
       <li class="heading selected">Slider images</li> 
       <li><a href="index.php?action=staticpages" title="">Static pages</a></li> 
       <li><a href="index.php?action=accomodation" title="">Accomodation</a></li> 
       <li><a href="index.php?action=general" title="">General</a></li> 
       <li><a href="index.php?action=settings" title="">Settings</a></li> 
       <li><a href="index.php?action=dologout" title="">Logout</a></li> 
</ul> 

和我的 “未完成” jQuery函数：

$('.navigation li a').click(function(e) { 
    e.preventDefault(); 
    $('.navigation li').removeClass('heading selected'); 
    $(this).parent().toggleClass('heading selected'); 
}); 

的李元素类别“标题选定”是默认/选定的元素。

我想一下其他李元素后实现：

  <li><a href="index.php?action=sliderimages" title="">Slider images</a></li> 
      <li class="heading selected">Static pages</li> 

总之

，去掉“航向选择”列表类从默认的，assing这个类的新点击元素，并且将锚点href添加到默认元素，并从新单击的元素中移除锚点标记。

在此先感谢你们！ :)

Answer 1

为了使这更容易实现，我建议你不要添加/删除li中的a元素，并简单地使用CSS将元素设置为“默认文本”，将JS设置为防止默认行为。

您可以使用此作为指南：

$('.navigation li a').click(
    function(){ 
     if ($(this).is('.headingSelected')) { 
      return false; 
     } 
     else { 
      $(this) 
       .closest('li') 
       .siblings() 
       .removeClass('headingSelected'); 
      $(this).closest('li').addClass('headingSelected'); 
      return false; 
     } 
    }); 

JS Fiddle demo。

请注意，我已经将您的'标题选定'类名拼接成一个单独的，骆驼壳的，'headingSelected'，并且在链接的演示中，我必须猜测第一个链接的URL应该是什么。所以要注意，如果你应该尝试直接复制/粘贴。

---

编辑，以解决我的误解，认为这是用于页内导航，或者Ajax交互。

以下似乎工作，但将需要包括在需要的功能的所有页面（无论是在线文档的head或通过链接的js文件）：

var currentURL = "http://www.yourwebsite.com/index.php?action=staticpages"; 
var page = currentURL.substring(currentURL.indexOf('=') + 1); 

$('.navigation a').each(
    function(i){ 
     if ($(this).text().toLowerCase().replace(' ','') == page) { 
      $(this).closest('li').addClass('headingSelected'); 
     } 
    }); 

JS Fiddle demo 。

如果您应该使用上述内容，只需确保从html中删除headingSelected类名，并允许脚本在运行时分配类。

更简洁，但在其他方面完全一样，以前编辑的答案，你也可以使用：

var currentURL = "http://www.yourwebsite.com/index.php?action=staticpages"; 
var page = currentURL.substring(currentURL.indexOf('=') + 1); 

$('a[href$="' + page + '"]').closest('li').addClass('headingSelected'); 

JS Fiddle demo。

参考文献：

• click()。
• is()。
• closest()。
• siblings()。
• removeClass()。
• addClass()。
• substring()。
• indexOf()。
• each()。
• text()。
• toLowerCase()。
• attrubte$="value" attribute-ends-with selector。

Answer 2

在这里，你有一个解决方案，将添加/删除李大卫托马斯提到的元素。

$('.navigation li a').click(function (e) { 
    e.preventDefault(); 
    $('.navigation li').removeClass('heading selected'); 
    $('.navigation li').each(function (index) { 
     if ($(this).children().size() == 0) { 
      $(this).html("<a href='index.php?action=" + $(this).text().replace(' ', '').toLowerCase() + "'>" + $(this).text() + "</a>") 
     } 
    }); 
    $(this).parent().html($(this).text()); 
    $(this).parent().toggleClass('heading selected'); 
});