jquery - 单击链接时在另一个上显示 div

Question

我想在单击链接时在另一个上显示一个 div这是 html 和 css 代码:

<div id="desc" class="desc">some text</div>
<div id="awards" class="awards">some other text</div>
<a href="#">click</a>

.desc {
border:1px solid #000;
height:170px;
width:330px;
}
.awards {
border:1px solid #000;
height:170px;
width:330px;
display:none;
}

如果可能，使用过渡。

我举了一个例子，我希望 desc 消失并且 awards 出现 http://jsfiddle.net/06nsd1y3/

Answer 1

如果您不想回到初始状态，那么 Javascript 就不是必需的:只需将 CSS 与 :target 伪类一起使用

示例:http://jsfiddle.net/03vqnoob/

---

标记:

<div id="desc" class="desc">some text</div>
<div id="awards" class="awards">some other text</div>
<a href="#desc">click</a>

CSS:

div:target {
    display: none;
}

div:target + div  {
    display: block;
}

如果您还需要过渡，您可以使用 opacity 属性，例如http://jsfiddle.net/w17p6o5d/