我的网站有一个导航栏:
<div id='menu'><ul>
<li><a href='index.html'>Home</a></li>
<li><a href='about.html'>About Us</a></li>
<li><a href='http://www.brownpapertickets.com' target=_blank>Ticket Sales</a></li>
<li><a href='merch.html'>Merchandise</a>
<ul>
<li><a href='merch.html'>Products</a></li>
<li><a href='cart.html'>Shopping Cart</a></li>
</ul>
</li>
<li><a href='past.html'>Past Shows</a>
<ul>
<li><a href='photos.html'>Photo Gallery</a></li>
<li><a href='vids.html'>Video Clips</a></li>
</ul>
</li>
</ul></div>
我想将它存储在一个中心位置,这样每次我都要添加一个超链接或者我不需要编辑每个文件的东西.最好的方法是什么？
Ali*_*guy 24
假设您使用的是脚本语言,例如PHP,您只需将上面的HTML保存在一个名为header.php(或您喜欢的东西)的php文件中
然后在你写的其他php文件中:
include_once('header.php'); 它会在那里填充HTML.
一些资源给你:
http://php.net/manual/en/function.include.php
http://www.php.net/manual/en/function.include-once.php
http://php.about.com/od/tutorials/ht/template_site.htm
请享用!
no.*_*ing 17
更新 @AlienWebguy指出,这些解决方案将损害您在搜索引擎结果中的排名.如果您关心这一点,请不要使用它们.但在我看来,作为有效的选择,他们值得了解.
如果服务器端包含(使用PHP或其他语言)不是一个选项,您可以使用:
框架
在所有页面中,包括iframe(样式为无边框或滚动条),并将其设置为src包含导航标记的HTML文件.当然,你会遇到以下链接的麻烦,你可能不得不诉诸JavaScript来获得'正确'的行为.这可能不值得努力.要正确地关注链接,您需要在导航链接中使用该target属性_top(或者可能_parent).这可能是最简单的解决方案,即使在没有脚本支持的用户代理中也应该有效.
例如,您的页面将如下所示:
<html>
<body>
<iframe src="navbar.html" class="navbar" />
<!-- other content here -->
</body>
</html
使用navbar.html看起来像这样:
<html>
<body>
<div id='menu'><ul>
<li><a href='index.html' target="_top">Home</a></li>
<li><a href='about.html' target="_top">About Us</a></li>
<li><a href='http://www.brownpapertickets.com' target="_blank">Ticket Sales</a></li>
<li><a href='merch.html' target="_top">Merchandise</a>
<ul>
<li><a href='merch.html' target="_top">Products</a></li>
<li><a href='cart.html' target="_top">Shopping Cart</a></li>
</ul>
</li>
<li><a href='past.html' target="_top">Past Shows</a>
<ul>
<li><a href='photos.html' target="_top">Photo Gallery</a></li>
<li><a href='vids.html' target="_top">Video Clips</a></li>
</ul>
</li>
</ul></div>
</body>
</html>
Ajax
以HTML片段(不是完整的HTML文档)的形式保存导航栏所需的HTML,并在页面加载时使用ajax加载它.这是使用jQuery的一个例子.在您的页面上:
<html>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').('navbar.html');
});
</script>
<body>
<div id='menu' />
</body>
</html>
navbar.html
<ul>
<li><a href='index.html' target="_top">Home</a></li>
<li><a href='about.html' target="_top">About Us</a></li>
<li><a href='http://www.brownpapertickets.com' target="_blank">Ticket Sales</a></li>
<li><a href='merch.html' target="_top">Merchandise</a>
<ul>
<li><a href='merch.html' target="_top">Products</a></li>
<li><a href='cart.html' target="_top">Shopping Cart</a></li>
</ul>
</li>
<li><a href='past.html' target="_top">Past Shows</a>
<ul>
<li><a href='photos.html' target="_top">Photo Gallery</a></li>
<li><a href='vids.html' target="_top">Video Clips</a></li>
</ul>
</li>
</ul>