Question

是否可以创建一个带引导程序的导航栏，我不会导航到同一个html页面中的选项卡，而是导航到不同的html页面？我也希望保持淡入淡出的风格。

似乎应该有可能导致大页面似乎不可能将所有内容都放在同一个html页面中。

<body class="page"> 
<div id="navigationbar">
    <ul class="nav nav-pills centerdiv span5">
      <li class="active"><a href="#main" data-toggle="tab">Main</a></li>
      <li><a href="#about" data-toggle="tab">About</a></li>
      <li><a href="#open" data-toggle="tab">Open</a></li>
      <li><a href="#contact" data-toggle="tab">Contact</a></li>
    </ul>
</div>

我怎样才能写出类似

的内容

<body class="page"> 
<div id="navigationbar">
    <ul class="nav nav-pills centerdiv span5">
      <li class="active"><a href="main.html">Main</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="open.html">Open</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

目标是包含在具有类淡化的标记中的第一种样式，但如果我将目标分隔在不同的页面中，则这不起作用。

Answer 1

您只需将class="active"设置为各自文件中的导航栏链接即可。

如果您有很多页面，那么在每个页面中导航都会很痛苦，因为如果您在一个地方进行导航，则必须在其他地方进行更改。您可以将导航栏移动到单独的文件中并执行一些脚本编写。例如在PHP中你会有这样的东西：

<li<?php active('main.html'); ?>><a href="main.html">Main</a></li>

你需要这样的功能：

function active($file) {
    if($_SERVER['REQUEST_URI'] == '/'.$file) {
        echo ' class="active';
    }
}

请注意，这过于简单了。您需要剥离查询字符串，如果文件不在域的根目录中，这也不起作用。

您可以将菜单插入此类页面

<?php include __DIR__.'/navigation.php'; ?>

您还可以使用一些模板系统让您更加简单。 Jekyll对你来说很有意思。

示例菜单：https://github.com/rsms/rsms.github.com/blob/master/_layouts/default.html#L78

如何分离引导程序导航的目标并且仍然有淡入淡出

1 个答案: