我有一个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>
所以基本上这个菜单有助于浏览内容。
当我加载菜单的主页时,我也希望有一个函数自动加载其他链接,以便加快导航速度,当然我希望这些链接的内容仅在单击菜单中的相应链接时才显示。
我应该研究什么库/函数来实现这一点?
哪个库或函数
你可以看到,在我的代码中,一切都是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()
}