因此,我编写了一个快速的 jQuery 函数来了解我正在寻找的具体内容,如果有人可以帮助我解决这个问题。我读了几篇关于让一个元素隐藏而另一个元素显示的帖子。我对jQuery没有太多经验,所以我提前道歉。我确实发现你可以同时调用两个,或者你可以使用第二个语句作为回调。我真的只是在寻找能够以适度淡入淡出切换两者显示的东西。我记得我不希望三角形移动,它应该就像文本只是在三角形内部发生变化一样。但是我这里的东西似乎没有效果。我想在页面加载时隐藏第二个三角形,但我无法做到,而且我也无法在点击时隐藏第一个三角形。我只是想快速解决这个问题。提前致谢。
这是HTML:
<div class="buttons">
<div class="container">
<div class="button1"><p>1</p></div>
<div class="button2"><p>2</p></div>
</div>
</div>
附带jQuery函数:
$(window).load(function(){
$('.button2').hide();
});
$('.button1').click(function(){
$('.button1').hide();
$('.button2').show();
});
$('.button2').click(function(){
$('.button2').hide();
$('.button1').show();
});
用一点 CSS:
.buttons{
width:100%;
}
.buttons .container{
text-align:center;
}
.button1, .button2{
display:inline-block;
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-top:40px solid #CC0000;
cursor:hand; cursor:pointer;
}
.button1 p, .button2 p{
position:absolute;
color:#F9F9F9;
z-index:9999;
margin-top:-30px;
margin-left:-2px;
font-size:7px;
}
如果有人想改变任何东西,这里是一个jsfiddle 。