如何突出顯示頁面上排序類型數據的菜單項？

In this site我想突出顯示菜單上排序的類型。我發現許多來源使用CSS或JavaScript來做這件事，但我無法理解它們足以將它們應用到本網站（它們似乎是用於下拉菜單）。你能指導我如何做到這一點與我現在有這個頁面的CSS？它只是一個頁面，按5種不同的方式排序。我的main.css如下。謝謝！如何突出顯示頁面上排序類型數據的菜單項？

.admin-content {width: 95%; 
margin-top: 0px 
margin-bottom: auto; 
margin-right: 5px; 
margin-left: 5px; 
padding: 0px;} 

.image-submit {width: 550px; margin-top: 0px margin-bottom: auto; margin-right: 50px; margin-left: 70px; padding: 15px;} 

.image-page {width: 90%; padding: 15px;} 

body { font-size: small; font-family: Verdana, Helvetica, sans-serif; } 

a:link { color:#000000; text-decoration:none; } 
a:visited { color:#000000; text-decoration:none; } 
a:hover { text-decoration: underline; color: #0066CC; } 
a:active { text-decoration: none } 

tr {font-size: small; font-family: Verdana, Helvetica, sans-serif; }  

.small {color: #808080; font-size: x-small; } 
.xxsmall {color: #808080; font-size: xx-small; line-height:60%} 
.small-tags {font-size: x-small; } 
.large {color: #0033FF; font-size: 130%; } 
.smaller-line-height {line-height:10%} 
.medium {font-size: medium; }

更新

我根據Alon's answer更新腳本，但是這是行不通的。我究竟做錯了什麼？

我添加了JS到報頭：

<head> 
... 
self.response.out.write("""<script language="Javascript" type="text/javascript"> 
var url = window.location.href, 
sort_by = url.split("="); 
if (sort_by.length == 2) { 
document.getElementById(sort_by[1]).className = "active"; 
}</script>""") 
... 
</head>

改變網址：

self.response.out.write("""<p> 
<b>sort by: </b><a href="/displayimage?sort_by=color">color</a> | 
<a id="number_of_attorneys" href="/displayimage?sort_by=number_of_attorneys">number of attorneys</a> | 
<a id="number_of_partners" href="/displayimage?sort_by=number_of_partners">number of partners</a> | 
<a id="number_of_associates" href="/displayimage?sort_by=number_of_associates">number of associates</a> | 
<a id="associate_salary" href="/displayimage?sort_by=associate_salary">associate salary</a> | 
</p>""")

和我增加了.active { color:red; }到main.css。

.active { color:red; }

但是，這不按預期工作。是.active { color:red; }衝突與a:active { text-decoration: none }在CSS？我刪除了a:active { text-decoration: none }但它沒有區別。

來源

2011-10-01 Zeynel

你的HTML應該是

<a id="number_of_attorneys" href="/displayimage?sort_by=number_of_attorneys">number of attorneys</a> | 
    <a id="number_of_partners" href="/displayimage?sort_by=number_of_partners">number of partners</a> | 
    <a id="number_of_associates" href="/displayimage?sort_by=number_of_associates">number of associates</a> | 
    <a id="associate_salary" href="/displayimage?sort_by=associate_salary">associate salary</a> |

JavaScript代碼應該像

var url = window.location.href, 
    sort_by = url.split("="); 
if (sort_by.length == 2) { 
    document.getElementById(sort_by[1]).className = "active"; 
}

你也應該與高亮風格添加類主動到你的CSS

.active { color:red; }

來源

2011-10-01 23:01:08

@阿龍：感謝您的回答。現在我有了更好的理解，但我無法讓代碼工作。我用我所做的更新了這個問題。我究竟做錯了什麼？ – Zeynel

我認爲你應該將代碼移到html下，因爲它在頁面加載後立即執行，並且菜單項仍未加載。將代碼移動到您的html底部 –

@ Alon：是的，現在問題就出現了。但還有另一個問題。 '.active'中的'color：red'不起作用。我添加了'font-weight：bold;'現在項目只顯示粗體。你知道爲什麼只有大膽的作品在這個'.active {color：red;字體重量：粗體;文字裝飾：下劃線; }'？再次感謝！ – Zeynel

如何突出顯示頁面上排序類型數據的菜單項？

回答

相關問題