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消失并奖励apear http://jsfiddle.net/06nsd1y3/

Answer 1

如果您不想回到初始状态，那么Javascript就没有必要了：只需使用带有:target伪类的CSS

示例：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/

Answer 2

使用Javascript

＆＃13;

function fun()
    {
        document.getElementById("desc").style.display="none";
        document.getElementById("awards").style.display="block";
    }

＆＃13;

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

＆＃13;

<div id="desc" class="desc">some text</div>
<div id="awards" class="awards">some other text</div>
<a href="#" onclick="fun();">click</a>

＆＃13;

Answer 3

在最简单的jQuery中 -

$('a').click(function(){
  $('#desc').fadeOut();
  $('#awards').fadeIn();
});

有关完整文档，请参阅fadeIn()和fadeOut()

Answer 4

试试这个：http://jsfiddle.net/06nsd1y3/1/

$('a').click(function(){
    $('#desc').hide();
    $('#awards').fadeIn('slow');
});

Answer 5

使用切换功能。

$('a').click(function(){
    $('#desc').toggle();
  $('#awards').toggle();
});

单击链接时显示div

5 个答案: