Jquery加载默认元素

Question

嗨，我正在尝试在页面加载时加载默认类，我已经编写了以下代码，但需要它在将鼠标悬停在其他链接上之前在页面加载时加载 .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>

Answer 1

我修改了您的 html 以降低 Javascript 的复杂性。我还假设您不想在给定时间隐藏所有内容，因为您已经从可见的 .pu1 开始。

jsFiddle DEMO

$(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>