服务器端导航突出显示活动页面答案

【问题标题】：Server side navigation highlight active page服务器端导航突出显示活动页面
【发布时间】：2012-08-20 07:52:59
【问题描述】：

我希望实现一个能够识别活动页面的服务器端 header.shtml（可能通过向其添加 css 类）

<header class="topbar container">
<a href="http://www.example.com/" rel="home">
<div class="logo grid">
<h1 class="ir">Home</h1>
</div>
</a>
<nav class="navbar" role="navigation">
<ul>
    <li class="active"><a href="about.html">About</a>
    </li>
    <li><a href="projects.html">Projects</a>
    </li>
    <li><a href="blog.html">Blog</a>
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
</ul>
</nav></header>

我试图通过使用 .shtml 来减少代码，然后

<!--#include virtual="/header.shtml" -->

虽然我猜，这只能通过 Javascript 或 JQuery 来完成，但我想知道它是否只能通过 css 来完成？

【问题讨论】：

不，你不能只用 css 来做，因为你的网站必须对你页面上的 menuclicks 做出动态反应。为此你需要js

标签： css navigation shtml

【解决方案1】：

是的，这只能通过 CSS 来完成。我从这本书中学到了这个解决方案：CSS: The Missing Manual，它基于后代选择器。

首先，为每个导航条目分配一个唯一的 id：

<ul>
    <li id="nav_about"><a href="about.html">About</a>
    </li>
    <li id="nav_projects"><a href="projects.html">Projects</a>
    </li>
    <li id="nav_blog"><a href="blog.html">Blog</a>
    </li>
    <li id="nav_contact"><a href="contact.html">Contact</a>
    </li>
</ul>

然后，给每个页面的body标签分配一个id：

<!-- about.html -->
<body id="about">

<!-- projects.html -->
<body id="projects">

<!-- blog.html -->
<body id="blog">

<!-- contact.html -->
<body id="contact">

最后，使用 CSS 设置导航栏的样式：

nav li {
    /* default nav entry style here */
}

#about #nav_about, #projects #nav_projects, #blog #nav_blog, #contacts #nav_contacts {
    /* active nav entry style here */
    /* styles declared here will override the defaults because this selector has more specificity */
}

【讨论】：