跨网页的相同侧边栏

时间:2013-05-14 12:22:52

标签: javascript html css

我对网络开发很陌生。在一个网站的网页上保留相同的侧边栏和其他元素的最佳做法是什么?你存储侧边栏html并调用它吗?如果是这样的话,那会怎么做呢?

3 个答案:

答案 0 :(得分:0)

以下one way来执行此操作:使用“包含”文件。无需JavaScript。服务器完成工作,而不是要求客户端添加内容。

  

SSI或服务器端包含,最初是为了允许Web而开发的   开发人员在其他页面中“包含”HTML文档。如果你的网站   服务器支持SSI,可以轻松为您的网站创建模板。

     

将网站常用元素的HTML另存为单独的文件。   例如,您的导航部分可能会另存为navigation.html   或者navigation.ssi。       使用以下SSI标记在每个页面中包含该HTML。

<!--#include virtual="path to file/include-file.html" -->
  

在要包含文件的每个页面上使用相同的代码。

该页面还介绍了其他一些方法。但是,如果您知道使用包含文件调用它,则可以更轻松地搜索它。例如,this article描述了包括以及如何在必要时从JavaScript调用它们。

答案 1 :(得分:0)

有很多选项可以解决这个问题,但是我发现使用jQuery很简单。如果需要,请使用它。

  • 在您的HTML文件中添加jQuery CDN。
  • 创建一个sidebar.js的JS文件。
  • 复制侧边栏的所有HTML代码,并将其作为字符串变量存储在JS文件的函数中。

    function loadNavbarDiv() { String navbar_code_str = '<nav><div>...</div></nav> $('body').append(navbar_code_str); }

  • 然后在HTML文件中,您要添加导航栏,在<head>中添加以下代码

    <script src="sidebar.js"></script> <script> $(document).ready(function(){ loadNavDiv(); }); </script>

对我来说很好。 编码愉快!

答案 2 :(得分:-2)

只要您只使用html进行编码,就需要将html复制到每个页面中。您可以将侧栏的css存储在同一个文件中,然后在每个页面上调用它。

其他脚本语言和框架可能包含模板(php)或母版页(asp.net),例如可以在不同的页面中使用相同的代码。