Question

I have this website http://firesafetyexpo.in/（我指的是左侧嵌套列表菜单）。

当我点击带有子链接的菜单（例如“关于Fire＆amp; Safety India” - >其中的任何链接）时，页面会打开，但“点击”菜单不可见。我希望通过子链接（ARFLAGS）来查看整个<ul>。

这是html代码：

<li>

这是jquery代码：

<li class="active"><a href="index.html"><span>Welcome</span></a></li>
<li class='has-sub'><a href=""><span>About Fire & Safety India</span></a>
  <ul>
    <li><a href="pdf/Fire-Safety-Layout.pdf" target="_blank"><span>Floor plan</span></a></li>
    <li><a href="media-partners.html"><span>Support and Media Partners</span></a></li>
    <li class='last'><a href="organisers.html"><span>About Organisers</span></a></li>
  </ul>
</li>

Answer 1

单击菜单时，整个页面刷新也会刷新HTML。这样，您使用JavaScript完成的所有DOM操作都会丢失。无论您是添加了特定类还是删除了元素。

解决问题的一种方法是制作整个应用程序SPA（单页面应用程序）。但我不相信再次写整个网站是值得的。

这里你可以做的最简单的事情就是获取URL并获取域名之后的子字符串。您的所有HTML元素都应与您的路由具有相同的ID。这样，您只需选择与您的URL子字符串具有相同ID的元素，然后添加类active。

<强> --- ---编辑

好的，首先我会告诉你我在浏览你的网站时看到的东西。导航中的大多数链接都不起作用。如果您不需要它们，请删除它们......

您可以轻松地在文件夹中整理html文件。例如，您将拥有一个存储所有.html文件的主文件夹。 index.html直接在其中。在index.html旁边创建文件夹about并推送从导航中的“关于”标签调用的所有.html文件。

这样您的网址就像http://firesafetyexpo.in/about/media-partners.html

在导航中修复href（例如href=about/media-partners.html）。

将ID添加到导航中的所有主要标签。（<li id="about" class='has-sub'><a href=""><span>About Fire & Safety India</span></a>（你不需要＆lt; span＆gt;在这里...这取决于你。你将得到与<li id="about" class='has-sub'><a href="">About Fire & Safety India</a>相同的结果））。

最后将此功能添加到您的JavaScript文件中。

$(function() {
    $('#cssmenu a#' + location.pathname.split("/")[1]).addClass('active');
});

我还没试过这段代码。我真的希望它有效（：

如何保持嵌套<li> <a> tag active and visible?

1 个答案: