Активный пункт

[igornagorny89]

Помогите пожалуйста сделать вот такую фигнюшку, мне нужно чтобы при нажатии на пункт списка у которого есть еще выпадающий он становился активным, то есть нажатым, и я хочу чтобы когда он был нажатым иконка в углу пункта переворачивалась вниз или вверх  чтобы как бы показать что сейчас открыт этот пункт, ну вы поняли;

пробовал вот так:

 

.content-positioner .big-box h4 span{

background:#04172e url(../img/close.png)no-repeat 610px 5px;

}

content-positioner .big-box h4 span:active{

background:#04172e url(../img/open.png)no-repeat 610px 5px;

}

 эффект есть но, иконка при нажатии переворачивается а как только отпускаю мышку снова становится как при неактивном       Подскажите кто то как это сделать. Спс

 

[Aleksandr.L]

JavaScript используйте.

 

UPD: Можно конечно через CSS сделать, но через JS проще. Самый банальный пример на CSS: http://jsfiddle.net/T7QxB/

Edited March 1, 2014 by Aleksandr.L

[igornagorny89]

Будьте добры, подскажите какой? я нашёл скрипт который меняет картинку при нажатии на неё, но у меня не много сложнее, мне нужно закинуть эту картинку  или в <h4> ili v <span>, чтобы при нажатии в любой части этого  пункта меню эта стрелочка менялась а не конкретно при нажатии на эту картинку ) 

[rus]

вообще, с селектором active запись делают в таком порядке:

a:link    {color:green;}a:visited {color:green;}a:hover   {color:red;}a:active  {color:yellow;} 

т.е. объявляют последней, что бы она перекрывала hover, но так как эта конструкция не всегда и не везде срабатывает, то при помощи php или js выявляется текущий активный пункт меню и ему назначается класс active.

[igornagorny89]

спасибо ))