0

我有一个 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>

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

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

我应该研究什么库/函数来实现这一点？

4

1 回答 1

1

使用哪个库或函数

您可以看到，在我的代码中，一切都是 jQuery。所以在我的建议中，jQuery 将是最适合你的！你可以在这里：

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

页面将被缓存

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

动态创建菜单

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

例子

$('#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>

显示孩子

从这里显示a；因为a是 的孩子li，你可以使用这个：

$('li').click(function () {
  $(this).find('a').show(); // or even use toggle()
}
于 2013-10-23T08:30:49.263 回答