How to apply css class to an html element using jquery in ASP .NET MVC?

问题

I'm trying to implement a tab menu just like the one in Stack Overflow. I created an HTML list and styled it to look like tab menus using CSS. I put the HTML list on the master page. Now, how do you change the color of the list once it's clicked by the user?

For example, if you click the Stack Overflow "Users" tab menu, it will redirect you to the "Users" index view, and then change the color of the tab menu to orange. How do I achieve this?

回答1:

You dont and shouldnt use Jquery for this. The reason being is there is no clear reason from your description to actually use Javascript.

What you need to do on your master page is dynamically set the class of the current pages button to something like:

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

You can find out the current URL by accessing

Request.Url

Then simply create a CSS class to show the change

No need for javascript here. I love JQuery too, but too often people try and find excuses for using it, rather than using a simple more accessible solution. Remember not everyone can use Javascript

回答2:

You can use the follwoing funcitons to add/remove classes:

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

You can pass a parameter to removeClass, or leave it blank

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

回答3:

The HTML source for the top level navigation on SO looks like this when in the Questions area:

<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>

Notice the youarehere class attached to the li element containing the Questions text. The CSS definition behind that class turns the "button" orange. The youarehere class (or its equivalent for your project) could be added by server code in your master page or, as James Wiseman pointed out, via jQuery in the browser.

回答4:

I can't speak for SO but the way this usually works is by generating different HTML for each page along the lines of:

<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>

Where class="on" represents your different styling for your selected tab. Now you don't really want to do this for every page so you can place it in your master page like:

<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>

Then in each of your controller actions set the value of the tab you want to be selected like:

ViewData["CurrentTab"] = "Tab2";

You could test for the current URL in the Master page but this method offers a little bit more flexibility if multiple URLs should highlight the same tab.

I don't see the need for client side setting but if you needed to use JQuery like James Wiseman said:

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

来源：https://stackoverflow.com/questions/1315474/how-to-apply-css-class-to-an-html-element-using-jquery-in-asp-net-mvc

标签

jquery

asp.net-mvc

css

master-pages