Нужно чтобы класс active при выборе дочерних элементов присваивался родительским элементам. Помогите кто чем может! Вот ссылка для примера
HTML
<div id="navigation">
<ul>
<li><a class="active" href="#">1</a></li>
<li>
<a href="#">2</a>
<ul>
<li>
<a href="#">21</a>
</li>
<li>
<a href="#">22</a>
</li>
</ul>
</li>
<li>
<a href="#">3</a>
<ul>
<li>
<a href="#">31</a>
</li>
<li>
<a href="#">32</a>
</li>
</ul>
</li>
</ul>
</div>
Javascript
$(function() {
$("#navigation ul li a").click(function(e) {
e.preventDefault();
$("#navigation ul li a").removeClass('active');
$(this).addClass('active');
})
});
CSS
#navigation { clear:right; padding-top:28px; padding-bottom:47px; }
#navigation ul { list-style:none; }
#navigation ul li { float:left; display:inline; padding-left:29px; }
#navigation ul li a { font-size:14px; font-weight:bold; color:#000; text-decoration:none; }
#navigation ul li a.active,
#navigation ul li a:hover { color:#d91d2a; }
#navigation li {
list-style: none;
float: left;
height: 33px;
padding: 0;
margin: 0;
text-align: left;
position: relative;
padding-top: 15px;
}
#navigation li ul {
list-style: none;
padding: 0;
margin: 0;
display: none;
position: absolute;
left: 0;
top: 40px;
}
#navigation li ul li {
float: none;
height: 13px;
margin: 0;
padding: 10px;
left: 20px;
width: 150px;
text-align: center;
}
#navigation li ul li a {
width: 100px;
height: 10px;
}
#navigation li:hover ul, #navigation li.jshover ul {
display: block;
}