Question

我想给每个标签一个不同的颜色，但我该怎么做？香港专业教育学院尝试过给每个链接或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();
  });
});

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的未来证明，你可以使用＆gt;比如... .list-class > .list-item-class > a { }

有一个很棒的资源HERE on CSS Selectors。见列表中的＃8。

标签颜色不同

2 个答案: