Question

我目前正在为我的学校项目制作一个菜单栏，问题是，每当页面重新加载时，即使您在第三个菜单上，也总是将其重定向到第一个菜单内容。

HTML文件：index.php：

<div id="header">
    <ul id="header-link">
        <li data-content='Home'>HOME</li>
        <li data-content='ContactUs'>Contact Us</li>
        <li data-content='Login'>Login</li>
    </ul>
</div>

<div id="link-content"></div>

JavaScript文件：script.js

$(document).ready(function() {
    $('li').click(function() {
        $.ajax({
            type: 'GET',
            url: 'Content/'+$(this).data('content')+'.php',
            dataType: 'html',
            async: false,
            success: function(response) {
                $('#link-content').html(response);
            }
        })
    })
});

Answer 1

我建议您使用选择的当前菜单将会话或cookie设置到Web浏览器。之后，您可以使用当前活动页面验证会话的条件。

以下是将会话设置为浏览器的javascript代码：

sessionStorage.setItem（'active_menu'，'Your_Current_page'）;

Answer 2

我以您的代码为例，尝试将cookie设置为tabIndex，当您单击特定的li并在AJAX中获得成功响应时，我只是设置了cookie值并添加了{{ 1}}，特别是class=active。

刷新页面时，如果找到cookie值，则只需在特定的li中添加class=active。

请尝试使用此代码。

index.php

li

script.js

<div id="header">
  <ul id="header-link">
    <li data-content='Home'>HOME</li>
    <li data-content='ContactUs'>Contact Us</li>
    <li data-content='Login'>Login</li>
  </ul>
</div>

<div id="link-content"></div>

使用ajax使标签内容保持刷新

2 个答案: