0

こんにちは私はページの読み込み時にデフォルトのクラスを読み込もうとしています。次のコードを記述しましたが、他のリンクにカーソルを合わせる前にページの読み込み時に.pu1コンテンツアイテムを読み込み、他のリンクにカーソルを合わせると削除する必要があります。 mこれを行う方法または何を検索するかを失った??

jQueryコード：

$(document).ready(function () {
    $('.pua1').hover(function () {
        $('.pu1').show();
    }, function () {
        $(".pu1").hide();
    });
    $('.pua2').hover(function () {
        $('.pu2').show();
    }, function () {
        $(".pu2").hide();
    });
    $('.pua3').hover(function () {
        $('.pu3').show();
    }, function () {
        $(".pu3").hide();
    });
    $('.pua4').hover(function () {
        $('.pu4').show();
    }, function () {
        $(".pu4").hide();
    });
});

CSSコード：

.pua1, .pua2, .pua3, .pua4 {  }
.pu1, .pu2, .pu3, .pu4 {
      display:none;
}

HTMLコード：

<div id="links"> 
    <a href="#" class="pua1">link one</a>
    <a href="#" class="pua2">link two</a>
    <a href="#" class="pua3">link three</a> 
    <a href="#" class="pua4">link four</a>
</div>
<div id="text">
    <div class="pu1">
        <p>text 1</p>
    </div>
    <div class="pu2">
        <p>text 2</p>
    </div>
    <div class="pu3">
        <p>text 3</p>
    </div>
    <div class="pu4">
        <p>text 4</p>
    </div>
</div>
<div id="images">
    <div class="pu1">
        <img src="x/img/cut_03.jpg" width="407" height="344">
    </div>
    <div class="pu2">
        <img src="x/img/cut_03.jpg" width="407" height="344">
    </div>
    <div class="pu3">
        <img src="x/img/cut_03.jpg" width="407" height="344">
    </div>
    <div class="pu4">
        <img src="x/img/cut_03.jpg" width="407" height="344">
    </div>
</div>
4

3 に答える 3

1

JavaScript の複雑さを軽減するために、HTML を変更しました。また、特定の時点ですべてを非表示にしたくないと思っていました.pu1。

jsFiddle デモ

$(document).ready(function () {
    $('.pua').hover(function () {
        $('.pu').hide();
        $('.'+$(this).attr("data-display-class")).show();
    }, function () { });

    $('.pu1').show();
});

HTML

<div id="links"> 
    <a href="#" data-display-class="pu1"  class="pua">link one</a>
    <a href="#" data-display-class="pu2"  class="pua">link two</a>
    <a href="#" data-display-class="pu3"  class="pua">link three</a> 
    <a href="#" data-display-class="pu4" class="pua">link four</a>
</div>
<div id="text">
    <div class="pu1 pu">
        <p>text 1</p>
    </div>
    <div class="pu2 pu">
        <p>text 2</p>
    </div>
    <div class="pu3 pu">
        <p>text 3</p>
    </div>
    <div class="pu4 pu">
        <p>text 4</p>
    </div>
</div>
<div id="images">
    <div class="pu1 pu">
        <img src="x/img/cut_03.jpg" width="407" height="344">
    </div>
    <div class="pu2 pu">
        <img src="x/img/cut_03.jpg" width="407" height="344">
    </div>
    <div class="pu3 pu">
        <img src="x/img/cut_03.jpg" width="407" height="344">
    </div>
    <div class="pu4 pu">
        <img src="x/img/cut_03.jpg" width="407" height="344">
    </div>
</div>
于 2013-02-20T16:25:16.743 に答える
1

これを試してみましたか？

$(document).ready(function() {
    ....

    $('.pu1').show();
})

編集：すべてのホバーの機能とすべてのdivへ$('.pu').hide();のクラスに追加されました。pu

<script type="text/javascript">
$(document).ready(function(){
    $('.pua1').hover(function(){
        $('.pu').hide();
        $('.pu1').show();
    }, function() {
        $(".pu1").hide();
    });

    $('.pua2').hover(function(){
        $('.pu').hide();
        $('.pu2').show();
    }, function() {
        $(".pu2").hide();
    });

    $('.pua3').hover(function(){
        $('.pu').hide();
        $('.pu3').show();
    }, function() {
        $(".pu3").hide();
    });

    $('.pua4').hover(function(){
        $('.pu').hide();
        $('.pu4').show();
    }, function() {
        $(".pu4").hide();
    });

    $('.pu1').show();
});
</script>

<div id="links"> <a href="#" class="pua1">link one</a>
    <a href="#" class="pua2">link two</a>
    <a href="#" class="pua3">link three</a>
    <a href="#" class="pua4">link four</a>
</div>
<div id="text">
    <div class="pu pu1"><p>text 1</p></div>
    <div class="pu pu2"><p>text 2</p></div>
    <div class="pu pu3"><p>text 3</p></div>
    <div class="pu pu4"><p>text 4</p></div>
</div>
<div id="images">
    <div class="pu pu1"><img src="x/img/cut_03.jpg" width="407" height="344"></div>
    <div class="pu pu2"><img src="x/img/cut_03.jpg" width="407" height="344"></div> 
    <div class="pu pu3"><img src="x/img/cut_03.jpg" width="407" height="344"></div>
    <div class="pu pu4"><img src="x/img/cut_03.jpg" width="407" height="344"></div>
</div>
于 2013-02-20T16:24:04.410 に答える
0

これを試して...

$('#links > a').on('hover', function(){
    var index = $(this).attr('class');
    $('.pu'+ index.substring(3)).show();
});

$('#links > a').on('mouseleave', function(){
    var index = $(this).attr('class');
    $('.pu'+ index.substring(3)).hide();
});

そして、このjSfiddleの例を見てください

于 2013-02-20T16:39:07.620 に答える