如何在ASP .NET MVC中使用jQuery來將css類應用於html元素？

Question

我想實現一個標籤菜單就像堆棧溢出一樣。我創建了一個HTML列表並將其設計爲使用CSS看起來像標籤菜單。我把HTML列表放在母版頁上。現在，一旦用戶點擊列表後，如何更改列表的顏色？

例如，如果你點擊堆棧溢出「用戶」選項卡菜單，它會將您重定向到「用戶」索引視圖，然後更改選項卡菜單橙色的顏色。我如何實現這一目標？

Answer 1

你不應該使用jquery這個。原因是從描述到實際使用Javascript沒有明確的理由。

您需要在您的主頁上做的是動態類當前頁按鈕的設置是這樣的：通過訪問

Request.Url 

<li class="selected">Home</li> 
<li>Users</li> 
... 

你可以找到當前的URL然後，只需創建CSS類，在這裏顯示的變化

無需的JavaScript。我愛JQuery的太多，但往往許多人試圖找藉口使用它，而不是使用一個簡單的更容易的解決方案。記住不是每個人都可以使用JavaScript

Answer 2

可以使用follwoing funcitons添加/刪除類：

$("#MyElement").addClass(classname); 
$("#MyElement").removeClass([classname]); 
$("#MyElement").toggleClass(classname); 

您可以將參數傳遞給removeClass，或將其留空

http://docs.jquery.com/Attributes/toggleClass

Answer 3

的HTML源代碼的頂部SO上的水平導航看起來像這樣當在問題區域：

<ul> 
    <li class="youarehere"><a href="/questions">Questions</a></li> 
    <li><a href="/tags">Tags</a></li> 
    <li><a href="/users">Users</a></li> 
    <li><a href="/badges">Badges</a></li> 
    <li><a href="/unanswered">Unanswered</a></li> 
</ul> 

請注意youarehere類附加到li元素包含問題文本。該類後面的CSS定義將「按鈕」變成橙色。該youarehere類（或等值爲您的項目）可以通過服務器代碼在母版頁中添加或如詹姆斯·懷斯曼在瀏覽器中指出，通過jQuery。

Answer 4

我不能這麼但這通常的工作方式是通過線沿線的每個頁面生成不同的HTML說：

<ul class="tabs> 
    <li><a href="/tab1">Tab 1</a></li> 
    <li class="on"><a href="/tab2">Tab 2</a></li> 
    <li><a href="/tab3">Tab 3</a></li> 
</ul> 

哪裏類=「上」代表您所選標籤的不同樣式。現在，你真的不希望爲每一個頁面做到這一點，所以你可以把它放在你喜歡的母版頁：

<ul class="tabs> 
    <li <%= ViewData["CurrentTab"] == "Tab1" ? "class=\"on\"" : "" %>><a href="/tab1">Tab 1</a></li> 
    <li <%= ViewData["CurrentTab"] == "Tab2" ? "class=\"on\"" : "" %><a href="/tab2">Tab 2</a></li> 
    <li <%= ViewData["CurrentTab"] == "Tab3" ? "class=\"on\"" : "" %>><a href="/tab3">Tab 3</a></li> 
</ul> 

然後在每個控制器動作的設置你想要的選項卡的價值一樣被選擇：

ViewData["CurrentTab"] = "Tab2"; 

您可以測試在母版頁當前URL但這種方法提供了更多一點的靈活性，如果多個URL應該突出相同的標籤。

我看不到客戶端設置的需要，但如果你需要使用jQuery像詹姆斯·懷斯曼說：

$("#Tab1").addClass('on'); // or 
$("#Tab1").removeClass('on'); // or 
$("#Tab1").toggleClass('on');