0

NAVIGATIONを作成していますが、3つの状態があります。通常、ロールオーバー、および選択済み。

また、ボタンごとに3つの状態すべてで異なる画像が表示されます。 ナビゲーション

これをjQueryで実行したいと思います。

状態1と2別のクラスで表示できます

.boy1 a {background-image:...}
.boy1 a:hover {background-image:...}
.boy2 a {background-image:...}
.boy2 a:hover {background-image:...}
.boy3 a {background-image:...}
.boy3 a:hover {background-image:...}

ただし、ボタンをクリックすると、その名前またはその他の画像を含むDIVが表示されます。

例えば

$(".boy1").click(function() {
  $("#boy1").show("slow");
});

しかし、今私の問題は、誰かが以前に他のボタンをクリックした場合、＃boy1 DIVが非表示になり、.boy2をクリックした場合、＃boy2 show showと他の＃boy1または＃boy3が非表示になることです。

HTMLパート：

<div id="navigation">
    <div class="boy1"><a href="#section1"></a></div>
    <div id="boy1">MR ABC</div>

    <div class="boy2"><a href="#section2"></a></div>
    <div id="boy2">MR XYZ</div>

    <div class="boy3"><a href="#section3"></a></div>
    <div id="boy3">MR LALOLA</div>
</div>

<style type="text/css">
    .boy1 a { background-image:images/boy1.gif; display:block; cursor:pointer; height:100px; width:50px}
    .boy1 a:hover { background-image:images/boyimage1.gif;}
    #boy1 {position:absolute; top:100; left:50; height:30px; width:60px;}

    .boy2 a { background-image:images/boy2.gif; display:block; cursor:pointer; height:100px; width:50px}
    .boy2 a:hover { background-image:images/boyimage2.gif;}
    #boy2 {position:absolute; top:100; left:200; height:30px; width:60px;}

    .boy3 a { background-image:images/boy3.gif; display:block; cursor:pointer; height:100px; width:50px}
    .boy3 a:hover { background-image:images/boyimage3.gif;}
    #boy3 {position:absolute; top:100; left:350; height:30px; width:60px;}
</style>
4

2 に答える 2

1

私が正しく理解していれば、要素#boy1をクリックしたときにdivを表示したいのですが、要素をクリックすると、divは表示されますが、他の男の子のdivは非表示になります。.boy1.boy2#boy2

boy1またはboy2要素にはクラスが1つしかないことを前提としています。

もしそうなら、あなたはこれを試すことができます。

$(".boy1, .boy2, .boy3").click(function() {
   var self = this;
   $('[id^=boy]').hide();
   $("#"+self.className).show("slow");
});
于 2012-09-27T09:10:03.490 に答える
1

HTML

<div id="navigation">
    <div class="boy1"><a href="#section1">x</a></div>
    <div id="boy1" class="showhidediv">MR ABC</div>

    <div class="boy2"><a href="#section2">y</a></div>
    <div id="boy2" class="showhidediv">MR XYZ</div>

    <div class="boy3"><a href="#section3">z</a></div>
    <div id="boy3" class="showhidediv">MR LALOLA</div>
</div>​

JS

$(document).ready(function() {

  $('div.boy1').on('click',function(){
    $('div#boy1').siblings('.showhidediv').hide();
    $('div#boy1').show();
});

  $('div.boy2').on('click',function(){
    $('div#boy2').siblings('.showhidediv').hide();
    $('div#boy2').show();
});

   $('div.boy3').on('click',function(){
    $('div#boy3').siblings('.showhidediv').hide();
    $('div#boy3').show();
});

});

<ahref="http://jsfiddle.net/Kxgh2/"rel="nofollow">ここでデモを確認してください

$('.showhidediv').hide();すべてのdivを非表示にすることから始めたい場合は、コードに追加してください。

これで問題が解決することを願っています。ご不明な点がございましたら、お気軽にお問い合わせください。ありがとう

于 2012-09-27T09:10:27.350 に答える