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

Css 服务器端导航突出显示活动页面,css,navigation,shtml,Css,Navigation,Shtml,我希望实现一个服务器端header.shtml,能够识别活动页面(可能是通过向其添加css类) 我试图通过使用.shtml和 <!--#include virtual="/header.shtml" --> 不过我猜,这只能通过Javascript或JQuery实现,但我想知道这是否只能通过css实现?是的,这只能通过css实现。我从这本书中学到了这个解决方案:它基于后代选择器 首先,为每个导航条目分配一个唯一的id: <ul> &l

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


我试图通过使用.shtml和

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


不过我猜,这只能通过Javascript或JQuery实现,但我想知道这是否只能通过css实现?

是的,这只能通过css实现。我从这本书中学到了这个解决方案:它基于后代选择器

首先,为每个导航条目分配一个唯一的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>
最后,使用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 */
}

是的,这只能通过CSS实现。我从这本书中学到了这个解决方案:它基于后代选择器

首先,为每个导航条目分配一个唯一的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>
最后,使用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 */
}

不,你不能只使用css,因为你的网站必须对你页面上的菜单点击做出动态反应。你需要js。不,你不能只使用css,因为你的网站必须对你页面上的菜单点击做出动态反应。你需要js来做这个