css - 悬停或单击时显示新内容

Question

我想要我的 <nav>菜单以在页面上显示新内容。例如，我的菜单位于包含大 .png 设计的页面中心下方。我希望当您单击一个链接时，它不会加载另一个页面，而是在页面上显示新内容，并带有基本动画。就像点击链接从 <nav> 中提取新内容一样.

是否可以只使用 HTML5 和 CSS 来做到这一点？

Answer 1

使用 jQuery 可以很容易地 Hook 导航链接的点击事件。所以如果你有:

<a id="navigationLink1" > Some Navigation Item </a>

您可以像这样链接一个点击处理程序:

$(document).ready(function() {
    var linkClickHandler = function() {
        // your code with the animation and etc
    };

    $('#navigationLink1').hover(linkClickHandler);
    $('#navigationLink1').click(linkClickHandler);
});