3

次のスクリプトを使用して、ボタンのクリック時に div を表示/非表示にしています

function showHide(divID){
if (document.getElementById(divID).style.display == "none") {
    $('#'+divID).fadeIn(3000);

} else {
    $('#'+divID).fadeOut(3000);
}
}

これは私のHTMLです:

<button onClick="showHide('hideDiv',this.id)" type="button">English</button>
<button onClick="showHide('hideDiv',this.id)" type="button">Math</button>
<button onClick="showHide('hideDiv',this.id)" type="button">French</button>

単一のdivを使用して、クリック時にボタンのコンテンツを表示します

<div id="hideDiv" style="display:none;">
    <p>A painting workshop in the early Renaissance probably resembled</p>
</div>

英語の後に数学をクリックするとコンテンツが非表示になり、もう一度クリックすると再びコンテンツが表示されます。しかし、ユーザーが任意のボタンをクリックしたときにコンテンツを表示したいので、ここで「非表示」プロパティを非表示にして、ユーザーがどのボタンをクリックしてもコンテンツを表示できるようにします。

ここにフィドルリンクがありますhttp://jsfiddle.net/ytyAd/

4

3 に答える 3

1

これがあなたが探していると思うものです... http://jsfiddle.net/ytyAd/10/

JS はこれを $(document).ready() に入れます:

$("button.showHide").click( function() {
    var content = $(this).text();
    $("#hideDiv > p").hide("slow");
    $("#hideDiv #"+content).show("slow");
});

HTML:

<button class="showHide" type="button">English</button>
<button class="showHide" type="button">Math</button>
<button class="showHide" type="button">French</button>

<div id="hideDiv">
    <p id="English" style="display:none;">english stuff</p>
    <p id="Math" style="display:none;">math stuff</p>
    <p id="French" style="display:none;">french stuff</p>
</div>

もちろん、それをいじって（さまざまなアニメーション、コールバックなど）、コンテキストに合わせることもできます

于 2013-04-08T13:28:15.587 に答える
0

HTML : 

<div class="buttons">
<button id="engbutton" class="button" type="button">English</button>
<button id="mathbutton" class="button" type="button">Math</button>
<button id="frenchbutton" class="button" type="button">French</button>
</div>
<div class="contents">    
<div id="engbuttonDiv" style="display:none;" class="ContentDiv">
    <p>This is English Div</p>
</div>
<div id="mathbuttonDiv" style="display:none;" class="ContentDiv">
    <p>This is Maths Div</p>
</div>
<div id="frenchbuttonDiv" style="display:none;" class="ContentDiv">
    <p>This is French Div</p>
</div>
</div>

JS:

 $('.button').on('click', function(){
        $('.contents').find('div').hide();
        var getMessageDiv = '#'+$(this).attr('id')+"Div";
        if ($(getMessageDiv).is(':visible'))
        $(getMessageDiv).fadeOut();
         else 
        $(getMessageDiv).fadeIn();
    })

ライブデモ

于 2013-04-08T13:30:42.833 に答える
0

このようなものが必要ですか？

ライブデモはこちら

HTML

<button id="engbutton" class="button" type="button">English</button>
<button id="mathbutton" class="button" type="button">Math</button>
<button id="frenchbutton" class="button" type="button">French</button>
<div id="engbuttonDiv" style="display:none;" class="ContentDiv">
    <p>This is English Div</p>
</div>
<div id="mathbuttonDiv" style="display:none;" class="ContentDiv">
    <p>This is Maths Div</p>
</div>
<div id="frenchbuttonDiv" style="display:none;" class="ContentDiv">
    <p>This is French Div</p>
</div>

CSS

.ContentDiv
{
    height:50px;
    width:200px;
    background:green;
}

jQuery

  $(".button").click(function(){
        $(".ContentDiv").hide();
        var divid = $(this).attr("id") + "Div";
        if($("#"+divid).css('display') == 'none')
        {
            $("#"+divid).fadeIn(3000);
        }
        else
        {
            $("#"+divid).fadeOut(3000);
        }  
    });
于 2013-04-08T13:16:19.267 に答える