0

嗨，我正在尝试在页面加载时加载默认类，我编写了以下代码，但需要它在将鼠标悬停在其他链接上之前在页面加载上加载 .pu1 内容项，然后在将鼠标悬停在其他链接上时删除：我我迷失了如何做到这一点或搜索什么？

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

你有没有试过这个？

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

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

编辑：添加$('.pu').hide();到所有悬停的功能和pu所有 div 的类。

<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 回答
1

我修改了您的 html 以降低 Javascript 的复杂性。我还假设您不想在给定时间隐藏所有内容，因为您已经从.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 回答
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 回答