各タブに異なる色を付けたいのですが、どうすればよいですか? 各リンクや ul にクラスを与えるなどのことを試みましたが、うまくいきませんでした。anwserが非常に単純であることは知っていますが、ここにあるはずのコードがわかりません。使用したコードです
これは私のcssです
<style>
.tabs li {
list-style:none;
display:inline;
}
.tabs a {
display:inline-block;
background:#999;
color:#fff;
text-decoration:none;
width:172px;
height:30px;
}
.tabs a.active {
background:#fff;
color:#000;
}
.inhoud {
padding:18px;
width:600px;
padding-top:20px;
width:965px;
height:870px;
}
.tabstitel{
padding:10px;
width:120px;
background:#099;
}
</style>
そして、これは私の体の中にあります
<ul class='tabs'>
<li class="tab1"><a class="tabstitel" href='#tab1'>titel</a></li>
<li class="tab1"><a class="tabstitel" href='#tab2'>titel</a></li>
<li class="tab1"><a class="tabstitel" href='#tab3'>titel</a></li>
<li class="tab1"><a class="tabstitel" href='#tab4'>titel </a></li>
<li class="tab1"><a class="tabstitel" href='#tab5'>titel</a></li>
そしてスクリプト
$('ul.tabs').each(function () {
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function (e) {
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
e.preventDefault();
});
});