Question

我有这段代码：

<a class="active"
    data-ui-sref="exams">
        Exams
</a>
<span class="active">
    Exams
 </span>

有没有一种方法可以让链接在没有active类的情况下显示为内联，并且只有在active类时才使内联显示内联。我想我可以使用display属性但是我不知道如果只有类没有显示器。

我在这里添加了一些问题，因为可能还不清楚。请注意我希望显示：

<a>xx</a>

此不显示：

<a class="active">xx</a>

Answer 1

/* Hide the link by default */
a {
    display: none;
}
/* Show when it has active class */
a.active {
    display: inline;
}

Answer 2

只有css，我认为这可能是你想要的：

a, span.active {
    display: inline;
}
a.active, span {
    display: none;
}

请参阅jsfiddle。

Answer 3

您可以使用CSS的display属性来完成。

＆＃13;

a .active {
  display: inline;  /*Show when class active is there*/
}

a {
  display: none;    /*Hide when there is no class*/
}
  
span {
  display: none;  /*Hide when class active is not there*/
}

span .active
{
  display: block;    /*Hide when there is active class for the span*/
}

＆＃13;

Answer 4

您可以使用伪类:not。

注意：这不适用于IE <=8。谢谢@torazaburo指出。

＆＃13;

span {
    color: yellow;
}
span:not(.active) {
    display: block;
    color: red;
}
a {
    display: block;
    color: purple;
}
a:not(.active) {
    display: inline;
    color: green;
}

＆＃13;

 <a class="active" data-ui-sref="exams">Anchor with class active</a>
 <span class="active"> span with class active</span>
 <a data-ui-sref="exams"> anchor without class active</a>
 <span> span without class active</span>

＆＃13;

只有在没有活动类时才能显示链接？

4 个答案: