1

div を表示および非表示にする次のコードを作成しました。これにより、一度に 1 つの div が表示され、他の div は非表示になります。これは、Safari を除くすべてのブラウザで機能します。

HTML

<div class="buttons">
    <a class="button" id="showdiv1">Div 1</a>
    <a class="button" id="showdiv2">Div 2</a>
    <a class="button" id="showdiv3">Div 3</a>
    <a class="button" id="showdiv4">Div 4</a>
</div>
<div id="div1">1</div>
<div id="div2" style="display:none;">2</div>
<div id="div3" style="display:none;">3</div>
<div id="div4" style="display:none;">4</div>

JQuery

$('#showdiv1').click( function () {
    $('div[id^=div]').hide();
    $('#div1').show();
});
$('#showdiv2').click( function () {
    $('div[id^=div]').hide();
    $('#div2').show();
});
$('#showdiv3').click( function () {
    $('div[id^=div]').hide();
    $('#div3').show();
});
$('#showdiv4').click( function () {
    $('div[id^=div]').hide();
    $('#div4').show();
});​

私はまったくの初心者で、複数の div を表示するには Jquery が最もエレガントなソリューションだと考えていました。サファリ以外！

どんな助けでも大歓迎です-完全に受け取られます！

4

2 に答える 2

3

Safari の問題は、属性を持たない要素でclickイベントが発生しないためだと思います。ahref

また、コードを簡素化できます。代わりにこれを試してください：

<div class="buttons">
    <a class="button" id="showdiv1" href="#div1">Div 1</a>
    <a class="button" id="showdiv2" href="#div2">Div 2</a>
    <a class="button" id="showdiv3" href="#div3">Div 3</a>
    <a class="button" id="showdiv4" href="#div4">Div 4</a>
</div>
<div id="div1" class="child">1</div>
<div id="div2" class="child" style="display:none;">2</div>
<div id="div3" class="child" style="display:none;">3</div>
<div id="div4" class="child" style="display:none;">4</div>

jQuery

$(".button").click(function(e) {
    e.preventDefault();
    $(".child").hide();
    $($(this).attr("href")).show();
});

クラスを使用して要素をグループ化することに注意してください。これにより、コードがあまり繰り返されなくなります。

于 2012-04-16T09:03:26.670 に答える
0

質問で引用したコードの末尾に無効な文字があります。決勝直後のU+200Bキャラ;です。実際にコードをコピーして貼り付けると、試したすべてのブラウザーで失敗します。どういうわけかそのキャラクターを紹介したと思ったので、削除しました。しかし、私は考え始めて、別のコピーと貼り付けを行いました。見よ、キャラクターはそこにいました。

于 2012-04-16T14:53:50.580 に答える