如何在菜单项悬停（选择）时显示或隐藏 div 内容

Question

我现在有以下菜单：

  <div class="menu">
     <a class="active" href="#resume">**Resumé**</a>
     <a href="certificates.html">**Certificates**</a>
     <a href="contact.html">**Contact**</a>
     <a href="bio.html">**Bio**</a>
  </div>

当前输出：就目前而言，当单击上面的菜单项时，链接中显示的每个页面都会显示。它工作正常，但不是很“敏感”。您必须等待 individual 页面加载，这不太理想。（恢复是活动菜单项，除非单击其他选项，否则始终显示。）

期望的输出：例如，如果将鼠标悬停在“证书”上，我希望简历内容消失（隐藏），并让证书内容 div出现（显示）在页面上，然后如果将鼠标悬停在“联系人”上，证书内容应该消失，联系人 div 内容应该显示。因此，无论何时失焦（无悬停）：隐藏，每当聚焦（悬停）：显示。

以下代码不适用于 show/hide divs:

<div class="menu">
    <a href="#resume">Resumé</a>
    <a href="#certs">Certificates</a>
    <a href="#contact">Contact</a>
    <a href="#bio">Bio</a>
</div>

<script>
    $(document).ready(function() {

    $("a[href$='#certs']").onmouseover(function() {
    $(".resume").hide();
    $(".certs").show();
    });

    $("a[href$='#contact']").onmouseover(function() {
    $(".resume").css("display", "none");
    $(".contact").css("display", "block");
    });

    $("a[href$='#bio']").onmouseover(function() {
    $(".resume").hide();
    $(".bio").show();
    });

    $("a[href$='#resume']").onmouseover(function() {
    $(".resume").show();
    $(".certs").hide();
    $(".contact").hide();
    $(".bio").hide();
    });


    });
</script>


<div class="resume">

My script tag in the <head> tag looks as follows:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1  /jquery.min.js"></script>

Answer 1

每次用户单击菜单项时加载您的网页肯定不太理想。这是避免这种情况的一种方法。

将所有不同的 html 页合并为一个页面，每个页面单独 div。
加载时，隐藏所有 div，但要显示的除外。
每当用户单击菜单项时，首先隐藏所有 div（您可以跟踪正在显示的 div，如果愿意，只隐藏那个）然后显示与用户单击的菜单项对应的那个。

这样一来，您就可以预先加载所有内容，这就是性能受到影响的地方。

Answer 2

我按照 BobRodes 的说明添加了 jQuery 基于悬停事件的代码。在此之前，我采纳了 BobRodes 的建议，将所有 individual 页面放在一个页面中，以使网站更具响应性。现在，每次单击其中一个菜单链接时都不必加载每个 individual 页面，individual div（每个 div 代表以前是 individual 页面）只是根据需要显示和隐藏。谢谢你 BobRodes!!!

这是我想出的 jQuery 代码：

<script>
$(document).ready(function() {
$(".resume").show();
$(".certs").hide();
$(".contact").hide();
$(".bio").hide();

$("**a[href$='#certs'**]").hover(function() {
$(".resume").hide();
$(".contact").hide();
$(".bio").hide();
$(".certs").show();
});

$("**a[href$='#contact']**").hover(function() {
$(".resume").hide();
$(".certs").hide();
$(".bio").hide();
$(".contact").show();
});

$("**a[href$='#bio**']").hover(function() {
$(".resume").hide();
$(".certs").hide();
$(".contact").hide();
$(".bio").show();
});

$("a[href$='#resume']").hover(function() {
$(".resume").show();
$(".certs").hide();
$(".contact").hide();
$(".bio").hide();
});


});
</script>

如何在菜单项悬停（选择）时显示或隐藏 div 内容

How to display or hide div content on menu item hover (selection)

html

css

hover

display