-1

各タブに異なる色を付けたいのですが、どうすればよいですか? 各リンクや 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();
  });
});
4

2 に答える 2

0

これをCSSに追加します。

#tab1{background-color:red}
#tab2{background-color:green}
#tab3{background-color:blue}
#tab4{background-color:yellow}
#tab5{background-color:purple}

またはそれに似たもの。

于 2013-02-17T16:50:14.217 に答える
0

これは取り除かれます: HERE is a fiddle

HTML

<ul class='tabs'>
    <li class="tab1"><a href="?">titel</a></li>
    <li class="tab2"><a href="?">titel</a></li>
    <li class="tab3"><a href="?">titel</a></li>
    <li class="tab4"><a href="?">titel</a></li>
    <li class="tab5"><a href="?">titel</a></li>
</ul>

CSS

.tabs {
    float: left;
    background-color: red;
    overflow: hidden;
    list-style: none; /* this is the list... */

    /* this is just to dempnstrate how the ul should contain the elements */
}

.tabs li {
    float: left;
}

.tabs a {
    display: block;
    float: left;
    padding: 1em 2em;

    background-color: rgba(0,0,0,.1);
    margin-right: 1em;
}



.tab1 a {
    background-color: orange;
}

    .tab1 a:hover { /* example :hover */        
    background-color: #f06;
    }

    .tab1 a:active { /* example :active */        
    background-color: #000;
    }

.tab2 a {
    background-color: yellow;
}

.tab3 a {
    background-color: lime;
}

.tab4 a {
    background-color: lightblue;
}

.tab5 a {
    background-color: pink;
}

これはまだ完全には理解できていませんが、aa クラスを指定して CSS でそれを呼び出すのa.myclass { }は、ブラウザにとっては具体的すぎて重いので、一般的にはダメです。したがって、私が言える限り、それらを呼び出したいと言うことができます.list-item-class a { }-より具体的には-リストの2番目の層のulの可能性を将来的に証明したい場合は、> like ...を使用できます.list-class > .list-item-class > a { }

CSS セレクターに関する優れたリソースが HERE にあります。リストの #8 を参照してください。

于 2013-02-17T20:12:11.507 に答える