Вкладки вручную с помощью addClass и removeClass - PullRequest
Новая
       21

Вкладки вручную с помощью addClass и removeClass

0 голосов
/ 02 апреля 2012

Я пытаюсь написать, как мне показалось, простую функцию jQuery для переключения вида выбранной и невыбранной вкладки. Вот что у меня есть:

CSS: 

ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
  display: block; 
  float: left; 
  height: 20px;
  padding: 6px 28px 5px 22px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background: #635B53 url(../images/tab.png) no-repeat 100% 0;}

ul#menu li.selected 
{ margin: 2px 2px 0 0;
  background: #635B53 url(../images/tab_selected.png) no-repeat 0 0;}

HTML: 

<ul id="menu">
  <li id="menuHome"><a href="home.html">Home</a></li>
  <li id="menuNews"><a href="news.html">News</a></li>
  <li id="menuDownloads"><a href="downloads.html">Downloads</a></li>
  <li id="menuFeedback"><a href="feedback.html">Feedback</a></li>
  <li id="menuContact"><a href="contact.html">Contact Us</a></li>
</ul>

JQuery: 

$('#menu li a').live ( 'click', function()
{
    $(this).parent().find('a.selected').removeClass('selected');
    $(this).parent().addClass('selected');
});

Что происходит так: я нажимаю на одну из вкладок, вкладка меняется на светлый цвет, как и должно, затем переключается обратно на исходный темно-серый. Я запустил его в FireBug, и он ясно показывает, что функция jQuery меняет вкладку на светлый цвет, но когда я «продолжаю», и программа возвращается в библиотеку jQuery, она переключается на исходную!

Я перепробовал все, что мог придумать ... небольшую помощь?!?

UPDATE

Даже если мы не беспокоимся об удалении выбранного класса из упакованного набора и просто концентрируемся на добавлении класса, код JQ по-прежнему выполняет то же самое. Другими словами, это: 

$('#menu li a').live ( 'click', function()
{
    $(this).parent().addClass('selected');
});

"Мигает" светлым цветом - он отображает более светлый цвет, а затем сразу возвращается к более темному цвету. Хлоп! Кто-то меняет это обратно ... кто?

Ответы [ 3 ]

4 голосов
/ 02 апреля 2012

попробуйте это: 

$('#menu li a').live ('click', function()
{
    $("a",$(this).parents("ul")).removeClass('selected');
    $(this).addClass('selected');
});​
1 голос
/ 02 апреля 2012

Проблема в вашем коде jQuery.Ваша первая строка использует .parent(), которая просто поднимется до элемента li элемента a, по которому щелкнули.Вызов .find() затем ищет, что li ... он НЕ ищет ни один из соседних элементов li, что вы и собираетесь.

Вместо этого вы хотите использовать $(this).closest('ul').find('a.selected').removeClass('selected').На следующей строке вы хотите добавить «выбранный» класс к элементу a, так что вместо этого вы захотите $(this).addClass('selected') (обратите внимание, что вам не нужно / не хотите использовать .parent() здесь).

0 голосов
/ 02 апреля 2012

Попробуйте это: 

$("#menu li > a").click(function() {
    parentLi = $(this).closest("li");
    parentLi.hasClass("selected")?(
        parentLi.removeClass("selected")
    ):(
        parentLi.addClass("selected"),
        parentLi.siblings().removeClass("selected")
    )
});
...