javascript - 如何从菜单预加载 html 链接并使用 javascript 隐藏/显示内容？

Question

我有一个 html 菜单，其中包含指向其他页面的链接，这些页面也包含此菜单。非常基本:

<div id="sidebar-nav">
    <ul id="dashboard-menu">
        <li class="active">
            <div class="pointer">
                <div class="arrow"></div>
                <div class="arrow_border"></div>
            </div>
            <a href="index.html">
                <i class="icon-dashboard"></i>
                <span>Home</span>
            </a>
        </li>
        <li>
            <a href="1.html">
                <i class="icon-signal"></i>
                <span>1</span>
            </a>
        </li>
        <li>
            <a href="2.html">
                <i class="icon-picture"></i>
                <span>2</span>
            </a>
        </li>
        <li>
            <a href="3.html">
                <i class="icon-calendar-empty"></i>
                <span>3</span>
            </a>
        </li>
    </ul>
</div>

所以基本上这个菜单有助于浏览内容。

当我加载菜单的主页时，我想要一个功能来自动加载其他链接，这样它可以加快导航速度，当然我希望这些链接的内容仅在菜单中的相应链接是点击。

我应该研究什么库/函数来实现它？

Answer 1

使用哪个库或函数

你可以看到，在我的代码中一切都是 jQuery。所以在我的建议中，jQuery 将是最适合你的!你可以在这里找到它:

api.jquery.com 或者甚至在他们的网站 www.jquery.com 你可以在他们的页脚标签上有一个快速链接。

页面将被缓存

您的页面及其部分代码作为缓存保存在本地存储中，您可以使用 F12 查看它们。这将打开开发人员工具，然后在网络工作区中，检查哪些是从服务器加载的，哪些是从本地存储加载的。几乎每个浏览器都会保存您的一些代码，来自 .css 文件或您的脚本，这样就不必每次都加载它。您可以在浏览器中看到代码 304(请纠正我，如果弄错了)，这意味着该文件是从本地计算机加载的。所以不用担心这个。您还可以获得有关加速和缓存 session 的其他有用文章。

动态创建菜单

要动态创建您可以使用的链接导航菜单:

例子

$('#dashboard-menu').html();

在代码的HTML中，可以编写列表项。这将被设置以便你得到它们。您可以在页面开始时调用此函数:

代码示例

$(document).ready(function () {
  $('#dashboard-menu').html();
}

技术

如果你不知道菜单是什么，比如你想从数据库加载数据，你也可以使用ajax请求，这样你就会把结果写在仪表盘里-菜单。但是，仅通过删除导航菜单并在页面加载后加载它，您的站点不会变快。

例如:

$.ajax({
  url: "page_to_load.html"
  success: function (data) {
    $('#dashboard-menu').html(data);
  }
});

使用 Ajax 的替代方法

另一种方法是 load()。

http://api.jquery.com/load/

只显示相关菜单

要显示内容，您可以使用 show()。像这样，让我们​​以您的代码为例

代码片段

<li>
   <a href="1.html">
     <i class="icon-signal"></i>
       <span>1</span>
   </a>
</li>

显示 child

从这里显示a；因为 a 是 li 的子级，所以你可以这样使用:

$('li').click(function () {
  $(this).find('a').show(); // or even use toggle()
}