How to highlight the menu item for the sort type of data on the page?
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. Tha开发者_如何学JAVAnks!
.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.
your html should be
<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> |
your javascript code should be something like
var url = window.location.href,
sort_by = url.split("=");
if (sort_by.length == 2) {
document.getElementById(sort_by[1]).className = "active";
}
you should also add class active to your css with the highlight style
.active { color:red; }
加载中,请稍侯......
精彩评论