单击链接时显示div

时间:2015-01-29 12:40:06

标签: jquery html css

我想在点击链接时显示另一个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/

5 个答案:

答案 0 :(得分:2)

如果您不想回到初始状态,那么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/

答案 1 :(得分:1)

使用Javascript

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

在最简单的jQuery中 -

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

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

使用切换功能。

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