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

如何解决如何在菜单项悬停选择上显示或隐藏div内容

我现在有以下菜单：

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

当前输出：按目前的样子，单击上面的菜单项时，将显示链接中显示的每个页面。它工作正常，但不是非常“响应”。您必须等待各个页面加载，这并不理想。（“恢复”是活动菜单项，除非一键单击其他选择，否则始终显示。）

所需的输出：例如，如果将鼠标悬停在“证书”上，我希望“继续”内容消失（隐藏），并在页面上显示（显示）“证书” div内容，并且然后，如果将鼠标悬停在“联系人”上，则“证书”内容应消失，并应显示“联系人” div内容。因此，每当焦点模糊（无悬停）：隐藏时，每焦点模糊（悬停）：显示。

以下代码无法显示/隐藏div：

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

解决方法

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

将所有不同的html页面放入一页，每个页面放在单独的div中。
在加载时，隐藏除您要显示的div之外的所有div。
每当用户单击菜单项时，首先隐藏所有div（您可以跟踪显示的是sklearn，并且如果愿意，可以只隐藏其中的一个），然后显示一个对应于用户单击的菜单项。

这样，您就可以预先加载所有内容，从而可以提高性能。

我遵循BobRodes的说明，并基于悬停事件添加了jQuery代码。在此之前，我采纳了BobRodes的建议，并将所有单独的页面都放在一个页面中，以使站点更具响应性。现在，不再需要每次单击菜单链接之一时都必须加载的每个单独页面，而是根据需要显示和隐藏单个div（每个div代表以前的单个页面）。谢谢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内容

如何解决如何在菜单项悬停选择上显示或隐藏div内容

解决方法

相关推荐