小编lot*_*_kw的帖子

所以,我编写了一个快速的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.