0

クリックすると、テキストを含む非表示の要素を表示する3つの画像があります。ただし、1つを表示するときは、他の2つの非表示要素が非表示になっていることを確認したいと思います。したがって、＃img2をクリックすると、＃text2は表示されますが、＃text1と＃text3は非表示になります。また、これは構文エラーである可能性がありますが、すべてのコードをscriptタグの下に配置しようとすると、正しく機能しませんでした。また、HTMLのonclick機能を使用するのではなく、すべてのjqueryをscriptタグに配置したいと思います。私はjqueryに非常に慣れていないので、すべての助けに感謝します。前もって感謝します！

<div id = "img1" onclick = "$('#text1').fadeIn(500)"></div>
<div id = "img2" onclick = "$('#text2').fadeIn(500)"></div>
<div id = "img3" onclick = "$('#text3').fadeIn(500)"></div>

<div id = "text1" hidden></div>
<div id = "text2" hidden></div>
<div id = "text3" hidden></div>

<script>
    /* TODO: Put all on-click code here */
</script>
4

4 に答える 4

1

コードを邪魔にならないようにすることをお勧めします

HTML

<div id = "img1" class="img">One</div>
<div id = "img2" class="img">Two</div>
<div id = "img3" class="img">Three</div>

<div id = "text1" class="hidden">One</div>
<div id = "text2" class="hidden">Two</div>
<div id = "text3" class="hidden">Three</div>​

CSS

.hidden{display:none}​

jQuery

$(function(){
    $("div.img").on("click", function(){
       var id = $(this).attr("id").substr(-1);
       $(".hidden").hide();
       $("#text"+id).show();        
    });   
})​

デモ

于 2012-09-18T18:31:15.877 に答える
0 
<div id = "img1" onclick = "$('.effect').hide();$('#text1').show()"></div>
<div id = "img2" onclick = "$('.effect').hide();$('#text2').show()"></div>
<div id = "img3" onclick = "$('.effect').hide();$('#text3').show()"></div>

<div id = "text1" class="effect" hidden></div>
<div id = "text2" class="effect" hidden></div>
<div id = "text3" class="effect" hidden></div>
于 2012-09-18T18:21:39.177 に答える
0

あなたはこのようなことを試すことができます：

HTML：

<div id="div1">One</div>
<div id="div2">Two</div>
<div id="div3">Three</div>

<div id="texts">
    <div id="txt1">Text One</div>
    <div id="txt2">Text Two</div>
    <div id="txt3">Text Three</div>
</div>

JavaScript：

$(function(){

    // hide every text div (all texts children)
    $( "#texts" ).children().hide();

    // this function hides every text child and than
    // fades in the desired one
    function hideAndShow( toShowSel ) {
        $( "#texts" ).children().hide();
        $( toShowSel ).fadeIn();
    }

    // registering the click event for the divs...
    $( "#div1" ).click( function(){
        hideAndShow( "#txt1"  );
    });

    $( "#div2" ).click( function(){
        hideAndShow( "#txt2"  );
    });

    $( "#div3" ).click( function(){
        hideAndShow( "#txt3"  );
    });
});

ライブの例はここにあります：http：//jsfiddle.net/davidbuzatto/FztUN/

于 2012-09-18T18:26:24.090 に答える
0

http://jsfiddle.net/uptVT/

<div id = "img1" onclick = "$('.text').hide();$('#text1').show();">img1</div>
<div id = "img2" onclick = "$('.text').hide();$('#text2').show();">img2</div>
<div id = "img3" onclick = "$('.text').hide();$('#text3').show();">img3</div>

<div id="text1" class = "text" hidden>text1</div>
<div id="text2" class = "text" hidden>text2</div>
<div id="text3" class = "text" hidden>text3</div>

<script>
    /* TODO: Put all on-click code here */
</script>​
于 2012-09-18T18:31:29.500 に答える