如何在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');