如何在页面上突出显示数据排序类型的菜单项？
在此站点我想突出显示菜单上的排序类型。我找到了很多使用 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 的回答 但这不起作用。我做错了什么？
我将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>
更改了url：
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; } 与 css 中的 a:active { text-decoration: none } 冲突？我删除了 a:active { text-decoration: none } 但没有什么区别。
In this site I would like to highlight the type of sort on the menu. I found many source to do this with css or javascript but I could not understand them enough to apply them to this site (they seem to be for pull-down menus). Can you direct me about how to do this with the css that I have now for this page? It is just one page, sorted 5 different ways. My main.css is below. Thanks!
.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; }
Update
I updated the script according to Alon's answer but this is not working. What am I doing wrong?
I added the js to the header:
<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>
changed the urls:
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>""")
and I added the .active { color:red; } to main.css.
.active { color:red; }
But this is not working as expected. Is .active { color:red; } conflicting with a:active { text-decoration: none } in the css? I removed a:active { text-decoration: none } but it didn't make a difference.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你的html应该是
你的javascript代码应该类似于
你还应该使用突出显示样式将类活动添加到你的css中
your html should be
your javascript code should be something like
you should also add class active to your css with the highlight style