Question

我的导航菜单位于与其他html页面不同的html文件中。

使用以下代码将菜单插入每个页面：

<div id="navigation-container"></div>
<script>$( "#navigation-container" ).load( "navigation.html" );</script>

菜单中隐藏了点击打开的子菜单。

点击的锚点会获得一个类，并在单击时保留它。这个类也为选择添加了一个样式来突出显示它。

$('#nav-box1 nav a').on('click', function () {
    $(' #nav-box1 nav a.current').removeClass('current');
    $(this).addClass('current');
});
$('#nav-box2 nav a').on('click', function () {
    $('#nav-box2 nav a.current').removeClass('current');
    $(this).addClass('current');
});
$('.nav-box3 nav a').on('click', function () {
    $('.nav-box3 nav a.current').removeClass('current');
    $(this).addClass('current');
});

当用户在此菜单中选择一个打开新页面的链接时，菜单会刷新并返回到其起始点，所有隐藏的元素将再次隐藏，而不会显示任何类。

我的问题是，当打开新页面时，如何让菜单保持打开状态，以及上一页中仍然应用的所有类？

Answer 1

您需要使用localstorage()之类的，

$(function(){
    $('#nav-box1 nav a').on('click', function(){
       $(' #nav-box1 nav a.current').removeClass('current');
       $(this).addClass('current');
       // set current active link to localstorage
       localStorage.setItem('nav_1_current',$('#nav-box1 nav a').index(this));
    });
    // if locastorage is defined 
    // and nav_1_current is already set then active the anchor tag
    if(localStorage && localStorage.getItem('nav_1_current')){
       current=localStorage.getItem('nav_1_current');
       $('#nav-box1 nav a:eq('+cur+')').addClass('current');
    }
});

类似地，您可以为nav-2和nav-3

添加此内容

Answer 2

几乎没有可能

动态内容加载：使用类似（但不完全相同）的动态内容加载菜单在页面上的放置方式;实现这一目标的最简单方法是使用一些支持开箱即用的库（即带有ng-view的AngularJS路由）
用于预选项目的服务器生成的客户端脚本：添加在服务器上生成的其他客户端脚本，该脚本将预选（和/或显示）将在页面加载时执行的特定菜单项在客户端
网址解析器：实施将在页面加载时运行的客户端脚本，并根据网页网址选择特定菜单项
HTML5本地存储空间：使用本地存储空间存储当前项目菜单选项并在页面加载时加载;最简单和最好的支持（在较旧的浏览器上）一个是使用window.name或者您可以使用HTML5本地存储选项
~~框架：使用框架进行导航和内容，这些框架不会重新加载菜单，而只是内容部分~~（不推荐 ）

根据您当前的jQuery实现和当前的开发标准，它可能最容易实现＃3 。当我说最简单时，我的意思是对您当前的代码库引入的更改最少。

最好的是＃1与一些库或纯jQuery实现。这将为用户的菜单悬停提供最佳用户体验，并且状态将在内容加载期间保留。整页重新加载仍会重新启动整个页面。

但这取决于您的实际实施，＃3是否适合您的用户。您的实施应遵循他们的期望。

Answer 3

您可以使用.load()方法中的回调函数：

$( "#navigation-container" ).load("navigation.html", function(){
     // if you have url like this: http://www.abc.com/page.html
     var oldUrl = window.location.href; 
     var page   = oldUrl.substr(oldUrl.lastIndexOf('/')+1); // gives page.html
     $(' #nav-box1 nav a[href*="' + page + '"]').addClass('current');
     $(' #nav-box2 nav a[href*="' + page + '"]').addClass('current');
     $(' #nav-box3 nav a[href*="' + page + '"]').addClass('current');
});

动态控制类和元素的显示

3 个答案:

几乎没有可能