導航問題與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'); 
});