如何突出显示页面上排序类型数据的菜单项？

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

如何突出显示页面上排序类型数据的菜单项？

回答

相关问题