jQuery изменение фона/css класс onclick изображения щелкнул и другие

У меня есть вопрос относительно jQuery. У меня есть несколько изображений, которые, по сути, одинаковы. Разница в том, что одно из изображений (назовем это «активным» изображением) используется в качестве боковой панели навигации, которая вызывает «анимированный коллапс» нескольких DIV в Div справа. Для этого элемента, который нажат (и вызывает анимированный сбой), я хочу изменить фоновое изображение, которое было определено в CSS.jQuery изменение фона/css класс onclick изображения щелкнул и другие

Мне бы очень понравилось, если бы я мог получить «активный» фон/класс, который будет отображаться на нем, а «неактивные» значки вернутся к «неактивному состоянию» onclick. Когда вы выбираете разные элементы в навигационной панели, каждый из них меняет свой фон/класс на активное обозначение, а также вызывает эффект анимированного коллапса.

Сейчас только событие animatedcollapse работает, хотя неактивный статус

Вот HTML, что я работаю с:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="animatedcollapse.js"></script> 
<script type="text/javascript"> 
animatedcollapse.addDiv('one', 'fade=1,speed=400,group=content,hide=0') 
animatedcollapse.addDiv('two', 'fade=1,speed=400,group=content,hide=1') 
animatedcollapse.addDiv('three', 'fade=1,speed=400,group=content,hide=1') 
animatedcollapse.init() 
</script> 
<script type="text/javascript"> 
$('a.toggle').click(function() { 
    $('a.toggle.select').removeClass('active'); 
    $(this).addClass('active'); 
}); 
</script> 
<style type="text/css"> 
a.toggle { 
    background-image: url(images/contentnav_inactive.png); 
    width: 275px; 
    height: 41px; 
    background-position: left top; 
    background-repeat: no-repeat; 
    float: left; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 
a.toggle.active { 
    background-image: url(images/contentnav_active.png); 
    width: 275px; 
    height: 41px; 
    background-position: left top; 
    background-repeat: no-repeat; 
    float: left; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 
a.contentheader { 
    height: 25px; 
} 
</style> 
</head> 
<body> 
<div class="content"> 
     <div class="contentnav"> 
     <a class="contentheader" href="javascript:animatedcollapse.toggle('one')" id="toggle1_TGLink"><img src="images/contnav_header_business.png" width="252" height="25" style="margin: 2px 4px" /></a> 
     <a class="toggle" id="toggle2_TGLink" href="javascript:animatedcollapse.toggle('two')"><img src="images/contentnav_text_busauto.png" width="269" height="41" /></a> 
     <a class="toggle" href="javascript:animatedcollapse.toggle('three')" id="toggle3_TGLink" ><img src="images/contentnav_text_bop.png" width="269" height="41" /></a> 
</div> 
     <div class="toggle></div> 
     <div class="contenttext"> 
      <div id="one" class="TG_hidden"><h1>Business Insurance Overview</h1> 
       <hr /> 
     </div> 
      <div id="two" class="TG_hidden"><h1>Business Auto</h1> 
       <hr /> 

      </div> 
      <div id="three" class="TG_hidden"><h1>Business Owners Insurance (BOP)</h1> 
      <hr /> 

     </div> 
     </div> 
</body> 
</html>

источник

2012-02-02 Mike Scott

Что не работает? – maxedison

@maxedison Извините, если не указать. Класс CSS не будет изменен onclick, а просто останется «a.toggle» и не изменится на «a.toggle.active», все остальное будет работать (анимированный сбой и т. Д.). Благодарю. –

Попробуйте этот код

$('a.toggle').click(function() { 
    $('a.toggle').removeClass('active'); 
    $(this).addClass('active'); 
});

Я только что снят .select класс

"animatedcollapse.js" Линия 107, вы должны удалить «@», так эта линия должна была

var $allcontrols = $('[rel^="collapse-"], [rel^="expand-"], [rel^="toggle-"]')

также следует обернуть селектор в $(document).ready в

источник

2012-02-02 20:02:45

Спасибо, попробовал, и это все равно не вызывает никакого эффекта. Вы можете увидеть это в живой среде здесь: http://mlminsure.com/test/businesscontent.php. Контент пока еще не добавлен. –

Тогда у вас есть еще одна проблема. Код Мехди должен работать нормально. – maxedison

Я добавил некоторые изменения в редактирование. –

jQuery изменение фона/css класс onclick изображения щелкнул и другие

ответ

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