参考:jsFiddle
上記の jsFiddle には、親要素と呼ぶli
クラス名を持つ要素があります。jQuery を使用してそれを選択すると、のカスタムが適用されます。accordion
background-color
green
ただし、特定のアンカーの最初の選択中にjQueryがクラス名を適用するときに、子要素li
、正確にはアンカー要素も必要です。teal
active
HTML:
<ul class="tabs">
<li class="accordion"><a href="#tab1">Boo1</a>
<ul id="sub-nav">
<li><a href="#"> Ipsum Text</a></li>
<li><a> Lorem text</a></li>
<li><a> More lorem text </a></li>
<li><a> Dolor Sit Amet </a></li>
</ul>
</li>
<li><a href="#tab2">Boo2</a></li>
<li><a href="#tab3">Boo3</a></li>
<li class="last-item"><a href="#tab4">Boo4</a></li>
</ul>
CSS:
.tabs li.active { background: green; }
.tabs li {font-size:20px;}
#sub-nav li {font-size:16px; margin-left:20px;}
#sub-nav li a.active {background:teal;}
jQuery:
(function(){
$('.tabs li').on('click', function(e){
$('.tabs li').removeClass('active');
$(this).addClass('active');
$(this).closest('ul').closest('li').children('a').addClass('active');
})
}());