服務器端導航亮點活動頁面

我期待實現服務器端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？

來源

2012-08-24 andy.d

不，你不能用css來做，因爲你的網站必須對m做出動態反應enuclicks在您的網頁上。你需要js –

是的，這隻能用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>

然後，分配一個ID，body標籤中的每個頁面：

<!-- 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 */ 
}

來源

2012-08-28 13:38:39 alf

服務器端導航亮點活動頁面

回答

相關問題