Как применить класс CSS к элементу HTML, используя jquery в ASP .NET MVC? - PullRequest
1 голос
/ 22 августа 2009

Я пытаюсь реализовать меню с вкладками, как в переполнении стека. Я создал список HTML и стилизовал его так, чтобы он выглядел как меню вкладок с использованием CSS. Я разместил список HTML на главной странице. Теперь, как вы можете изменить цвет списка после того, как пользователь нажал на него?

Например, если вы щелкнете по меню вкладки «Пользователи» переполнения стека, оно перенаправит вас в индексное представление «Пользователи», а затем изменит цвет меню вкладки на оранжевый. Как мне этого добиться?

Ответы [ 4 ]

3 голосов
/ 22 августа 2009

Вы не должны и не должны использовать Jquery для этого. Причина в том, что в вашем описании нет четкой причины использовать Javascript.

На главной странице вам нужно динамически установить класс кнопки текущих страниц, например:

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

Вы можете узнать текущий URL, набрав

Request.Url

Затем просто создайте класс CSS, чтобы показать изменения

Здесь нет необходимости в javascript. Я тоже люблю JQuery, но слишком часто люди пытаются найти оправдания его использованию, а не простому более доступному решению. Помните, что не каждый может использовать Javascript

0 голосов
/ 22 августа 2009

Я не могу говорить о SO, но обычно это работает, генерируя различный 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>

Где class = "on" представляет различные стили для выбранной вами вкладки. Теперь вы не хотите делать это для каждой страницы, поэтому вы можете разместить ее на главной странице, например:

<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');
0 голосов
/ 22 августа 2009

Исходный код 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 в браузере.

0 голосов
/ 22 августа 2009

Вы можете использовать следующие функции для добавления / удаления классов:

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

Вы можете передать параметр в removeClass или оставить его пустым

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

...