jQuery - Добавить и удалить класс

Ситуация в том, что у меня есть две кнопки, каждая из которых имеет выделенный класс. Но когда я нажимаю кнопку about, я хочу, чтобы класс изменился на класс highlightabout, а затем, когда я нажимаю кнопку графика, я хочу, чтобы класс highlightabout возвращался к классу about и классу графа, чтобы перейти в класс highlightgraph. Поэтому они переключались соответственно, когда я нажимаю любую кнопку.jQuery - Добавить и удалить класс

У меня есть этот сценарий, но я не понимаю, почему он не работает:

HTML:

<div id="wrapper"> 
<ul><li><a class="about"><span>About</span></a></li> 
     <li><a class="graph"><span>Graphic Design</span></a></li> 
</ul>

.CSS:

.about { background:url(../button/about_btn.png) no-repeat left center; width:160px; height:50px; float:left;cursor:pointer} 
.graph { background:url(../button/graph_btn.png) no-repeat left center; width:160px; height:50px; float:left;cursor:pointer} 
.highlightabout {background:url(../button/about_btn.png) no-repeat right center; width:160px; height:50px; float:left; cursor:pointer} 
.highlightgraph {background:url(../button/graph_btn.png) no-repeat right center; width:160px; height:50px; float:left; cursor:pointer}

Автор сценария:

$('.about').click(function() { 
    $(this).removeClass("about").addClass("highlightabout"); 
    $('.graph').removeClass("highlightgraph").addClass("graph"); 
}); 
$('.graph').click(function() { 
    $(this).removeClass("graph").addClass("highlightgraph"); 
$('.about').removeClass("highlightabout").addClass("about"); 
});

Цените любую помощь.

ОБНОВЛЕНИЕ: Чрезвычайно жаль, что не добавляя HTML, я не думал, что это поможет. Добавлено также HTML/.CSS.

источник

2012-03-21 user1164109

Вы должны предоставить больше информации - ошибки, HTML, что именно не работает ... – ventsislaf

приведенный выше код ничего об ошибке не сказать, пожалуйста предоставить дополнительную информацию! –

Работает для меня (или, по крайней мере, делает то, что _I_ ожидает от него): http://jsfiddle.net/zWJTG/ – David

$ ('. Graph'). RemoveClass ("highlightgraph"). AddClass ("graph");

Если это не будет:

$ removeClass ("график") addClass ("highlightgraph"); ('графа.)..

источник

2012-03-21 18:47:27 RTulley

$('.about').click(function() { 
    $(this).removeClass("about").addClass("highlightabout"); 
    $('.graph').removeClass("graph").addClass("highlightgraph"); 
}); 

$('.graph').click(function(e) { 
    $('.highlightabout').removeClass("highlightabout").addClass("about"); 
    $(this).removeClass("highlightgraph").addClass("graph"); 
});

fiddle Попробуйте это.

источник

2012-03-21 19:21:20

Не совсем тот эффект, который я хотел, но, возможно, это потому, что я не объяснил свою ситуацию должным образом. В любом случае я отправил ответ, спасибо за вашу помощь. – user1164109

Рад это знать и +1. –

Я нашел решение:

<div id="wrapper"> 
    <ul><li><a id="about_button" class="about"><span>About</span></a></li> 
     <li><a id="graph_button" class="graph"><span>Graphic Design</span></a></li> 
    </ul>

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

$('#about_button').click(function() { 
    $(this).removeClass("about").addClass("highlightabout"); 
    $('#graph_button').removeClass("highlightgraph").addClass("graph"); 
}); 

$('#graph_button').click(function() { 
    $(this).removeClass("graph").addClass("highlightgraph"); 
    $('#about_button').removeClass("highlightabout").addClass("about"); 
});

jsfiddle

источник

2012-03-22 17:08:18 user1164109

jQuery - Добавить и удалить класс

ответ

Смежные вопросы