3

そのため、誰かがこの問題を解決するのを手伝ってくれるなら、私が探しているものを具体的に示すために簡単な jQuery 関数を作成しました。ある要素を非表示にし、別の要素を表示することに関するいくつかの投稿を読みました。jQueryの経験があまりないので、あらかじめお詫び申し上げます。私が見つけたのは、両方を同時に呼び出すか、2 番目のステートメントをコールバックとして使用できることです。私は実際には、適度なフェードで2つの表示を切り替えるものだけを探しています. 三角形を動かしたくないことを念頭に置いています。テキストが三角形の中で変化しているように見えるはずです。しかし、私がここに持っているものは効果的ではないようです。ページの読み込み時に2番目の三角形を非表示にしたいのですが、それを取得できません。また、クリック時に最初の三角形を非表示にすることもできません。問題の迅速な修正を求めているだけです。前もって感謝します。

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があります。

4

5 に答える 5

12

jquery のtoggle()メソッドを使用します。

http://jsfiddle.net/4cWH3/6/

$('.button1,.button2').click(function(){
    $('.button1,.button2').toggle();
});
于 2013-06-21T12:07:08.510 に答える
4

これを行う ：

$('.button1,.button2').click(function(){
    $('.button1').toggle();
    $('.button2').toggle();
});

まず、複数の要素をリッスンできます。次に.toggle()、現在の状態に応じて関数が表示/非表示になります

作業例はこちら

注:.以前は CSS が欠落していbutton2たため、ライブラリ (jQuery など) を選択する必要があります。

于 2013-06-21T12:05:56.647 に答える
1

いくつかのフェード効果があります:

$('.button1,.button2').click(function(){
    $('.button1,.button2').filter(':visible').fadeToggle({
       done: function(){
            $(this).siblings().fadeToggle();
        }
    });
});
于 2013-06-21T12:13:34.600 に答える
0

フィドル

これが役立つかもしれません

var toggleButtons = function() {
 $('.button2,.button1').toggle();
} 

$('.button1,.button2'').click(function(){
   toggleButtons();
});
于 2013-06-21T12:14:17.393 に答える
0

解決

あなたのコードは正常に動作します! (最適化されていなくても)

注: jQueryを含めることを忘れないでください。

CSSに欠落しているドットがあります:

CSS

.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 .button2ます ! button2の前にドットがありません。

JSFiddle

于 2013-06-21T12:08:53.500 に答える