标签颜色不同

Question

我想给每个标签一个不同的颜色，但是我该怎么做呢？ 我试过像给每个链接或 ul 一个类这样的东西，但这没有用。 我知道答案很简单，但我不知道应该是什么 这是我使用的代码

这是我的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();
  });
});

Answer 1

将此添加到您的 CSS：

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

或类似的东西。

Answer 2

这是精简的：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;
}

我还没有完全理解这一点，但是给一个类，然后在你的 CSS 中调用它，比如a.myclass { }，我猜，对于浏览器来说太具体和太重了，通常是不行的。因此，据我所知，您想将它们称为.list-item-class a { } - 更具体地说 - 如果您想在未来证明您的列表中可能存在第二层 ul，您可以使用 > like....list-class > .list-item-class > a { }

有一个很好的资源HERE on CSS Selectors。参见列表中的#8。