如何在選擇時將CSS應用於菜單？

我有一個任務是在加載頁面時突出顯示選中的菜單。對於我有以下代碼：如何在選擇時將CSS應用於菜單？

$('.menuHeader').each(function() { 
    $(this).attr('id', 'menu' + ($(this).index() + 1)); 
    $(this).val($(this).index() + 1); 

    // Set the dynamic ids for links 
    $(this).find('a').attr('id', 'link' + ($(this).index() + 1)); 
    //alert('New ID : ' + $(this).find('a').attr('id')); 
}); 

$('.menuHeader a').click(function() { 
    alert("a"); 
    $('.menuHeader a').removeClass('menuHeaderActive'); 
    $(this).parent().parent(".menuHeader").addClass('menuHeaderActive'); 
});

但是，當我選擇第二個菜單，它的刷新和失蹤的選擇。

HTML：

<div class="menuBar"> 
    <div class="menuHeader ui-corner-top menuHeaderActive"> 
     <span><a href="#" onclick="Home()">Home</a></span> 
    </div> 
    <div class="menuHeader ui-corner-top"> 
     <span><a href="#" onclick="NewTransaction()">New Transaction</a></span> 
    </div> 
</div>

我怎樣才能解決這個問題？

function Home() { 
      window.location.href = "../../home/welcome"; 
     } 
     function NewTransaction() { 
      window.location.href = "../../EnergyCatagory/index"; 
     }

來源

2013-04-02 Niths

雞蛋裏挑骨頭上取下。反覆使用'$（this）'是不好的做法。將其存儲到一個變量中並使用該變量。 – epascarello

如果你在NewTransaction（）函數中刷新頁面，你的應用CSS將被設置爲默認值而不刷新頁面 – Dineshkani

@ Dineshkani-是的..那就是問題 – Niths

我想你可以修改你的超鏈接以包含正確的URL。然後在你jQuery測試瀏覽器當前url對超鏈接url - 如果它匹配應用你的menuHeaderActive類。

$(document).ready(function() { 
    var currentUrl = window.location.href; 
    var menuLink = $('.menuHeader a[href="' + currentUrl + '"]'); 
    menuLink.parent().parent(".menuHeader").addClass('menuHeaderActive'); 
});

當菜單鏈接之一後重新加載頁面已經被點擊我已經展示了應該運行和$('.menuHeader a[href="' + currentUrl + '"]');應該會發現菜單鏈接（超鏈接/ A-標籤）的腳本，用戶導航太URL匹配。然後是找到容器div並添加你的類的一個例子。

基本上你不會在用戶點擊菜單鏈接時添加css類;您必須在頁面重定向到其他頁面後設置css類。所以這是另一個頁面必須將css類設置爲正確的活動菜單鏈接。有100種方法可以做到這一點，但基於你提供的匹配url是最簡單的。

就我個人而言，我會讓每個頁面註冊一個頁面ID，它對應於其中一個菜單鏈接。事情是這樣的......

HTML

注意屬性數據相關頁面-ID添加到每個menuHeader DIV

<div class="menuBar"> 
    <div class="menuHeader ui-corner-top" data-associated-page-id="home-welcome"> 
     <span><a href="#" onclick="Home()">Home</a></span> 
    </div> 
    <div class="menuHeader ui-corner-top" data-associated-page-id="energy-catagory-index"> 
     <span><a href="#" onclick="NewTransaction()">New Transaction</a></span> 
    </div> 
</div>

的Javascript

加入每頁

文檔準備好處理程序，歡迎頁又名能源產品類別索引頁面又名../../EnergyCatagory/index

$(document).ready(function() { 
    SetActiveMenuCssClass('energy-catagory-index'); 
});

功能../../home/welcome

$(document).ready(function() { 
    SetActiveMenuCssClass('home-welcome'); 
});

文檔準備好處理程序全球

function SetActiveMenuCssClass(pageId) { 
    // finds div with menuHeader class that has the attribute data-associated-page-id equal to the page id 
    // then sets the active class 
    $('.menuHeader[data-associated-page-id="' + pageId + '"]') 
     .addClass('menuHeaderActive'); 
}

定義如果您正在使用像PHP服務器端語言，那麼你可以做這樣的事情https://stackoverflow.com/a/11814284/81053

來源

2013-04-02 12:51:32

我沒有得到你。 – Niths

@ Agent1看到修改 –

@ ChrisMoutray - 但它沒有進入功能 – Niths

注意：Chris提供的答案非常好，但是您必須在href的<a></a>中有鏈接，否則將會是undefined。

你可以與鏈接添加到id和a然後用

var menuLink = $('#'+currentUrl);

由克里斯提供

（這種方式，因爲你點擊的頁面不會重定向代碼鏈接，但將運行該功能）

<div class="menuBar"> 
    <div class="menuHeader ui-corner-top menuHeaderActive"> 
     <span><a href="#" id="http://www.yourwebsite.url//home/welcome" onclick="Home()">Home</a></span> 
    </div> 
    <div class="menuHeader ui-corner-top"> 
     <span><a href="#" id="http://www.yourwebsite.url/EnergyCatagory/index" onclick="NewTransaction()">New Transaction</a></span> 
    </div> 
</div>

而JS

$(document).ready(function() { 
    var currentUrl = window.location.href; 
    var menuLink = $('#'+currentUrl); 
    menuLink.parent().parent(".menuHeader").addClass('menuHeaderActive'); 
});

在一個側面說明，如果這是一個不同的頁面，你只需要添加menuHeaderActive到活動a和其他特定網頁

來源

2013-04-02 13:07:30 Spokey

在你提到的關於id的第一種方法中。你能解釋一下嗎？ – Niths

如何在選擇時將CSS應用於菜單？

回答

相關問題