CSS以突出顯示基於URL模式的目錄中的活動鏈接

我有一個div，其中包含每個頁面的目錄中的UL元素。CSS以突出顯示基於URL模式的目錄中的活動鏈接

目前，我不得不硬編碼活動元素上的特殊類（class =「active」）。但是，我試圖通過將href與瀏覽器的當前URL進行匹配來查看是否可以使用CSS3來完成這項工作。

例如，如果toc div的錨點中的href與頁面的當前URL匹配，請爲其添加特殊格式。

標記：

<div class="toc"> 
    <h3>Table of Contents</h3> 
    <ul> 
     <li><a href="http://mysite.com/page-title/">Part 1</a></li> 
     <li><a href="http://mysite.com/page-title/2">Part 2</a></li> 
     <li><a href="http://mysite.com/page-title/3">Part 3</a></li> 
    </ul> 
</div>

在上述例子中，我要應用特殊CSS格式到第二列表項元素，因爲它的HREF圖案具有匹配「/ 2「與URL模式。

如果這不是通過CSS可行的，我可以把它放在我的jQuery腳本中，如果你能提供jQuery代碼的話。

來源

2012-12-22 RegEdit

有腳本來做到這一點，如果你做例子，將有助於更多的真實世界（細節）...它是否需要與url相關，例如 – charlietfl

真實世界的例子是，你有一個頁面上的鏈接列表，所有的下劃線都用一個特殊的顏色來標識它們作爲鏈接，但當前頁面也在該列表中，而不是應用特殊的類（例如，class =「active」），以便可以刪除下劃線，更改顏色並粗體顯示元素，以便用戶知道這是指向當前頁面的鏈接。 – RegEdit

這裏有很多關於解析url的帖子。解析url並使用jQuery'filter（）'來找到你的鏈接 – charlietfl

用jQuery應該可以工作;

var urlString = window.location; // or try window.location.pathname 

$('a[href="' + urlString + '"]').addClass("active");

來源

2012-12-22 21:45:53 Turcia

+1有魅力。謝謝！ – RegEdit

這裏沒有JavaScript需要。只需將一個類添加到與當前頁面對應的body標籤中，並將相同的類添加到導航項。然後創建一個CSS規則來進行匹配套，像這樣：

<body class="products"> 
<div class="toc"> 
    <h3>Table of Contents</h3> 
    <ul> 
     <li><a href="http://mysite.com/page-title/" class="products-nav">Product Overview</a></li> 
     <li><a href="http://mysite.com/page-title/2" class="home-nav">A More Dynamic Home Page</a></li> 
     <li><a href="http://mysite.com/page-title/3" class="images-nav">Featured Images on Steroids</a></li> 
    </ul> 
</div>

和

<body class="home"> 
<div class="toc"> 
    <h3>Table of Contents</h3> 
    <ul> 
     <li><a href="http://mysite.com/page-title/" class="products-nav">Product Overview</a></li> 
     <li><a href="http://mysite.com/page-title/2" class="home-nav">A More Dynamic Home Page</a></li> 
     <li><a href="http://mysite.com/page-title/3" class="images-nav">Featured Images on Steroids</a></li> 
    </ul> 
</div>

等則：

.products .products-nav, .home .home-nav, .images .images-nav { 
    font-weight: bold; 
}

來源

2012-12-22 21:49:13 markle976

CSS以突出顯示基於URL模式的目錄中的活動鏈接

回答

相關問題