페이지의 데이터 정렬 유형에 대한 메뉴 항목을 강조 표시하는 방법은 무엇입니까?

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에 따라 스크립트를 업데이트하지만이 작동하지 않습니다. 내가 도대체 뭘 잘못하고있는 겁니까?

는 I 헤더에 추가 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>""")

및 I는 main.css.active { color:red; }에 추가.

.active { color:red; }

그러나 예상대로 작동하지 않습니다. .active { color:red; }이 (가) a:active { text-decoration: none }와 (과) 충돌합니까? 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> |

당신은 또한 강조 스타일로 CSS에 활성 클래스를 추가 할 게

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

처럼 자바 스크립트 코드가 있어야한다

.active { color:red; }

출처

2011-10-01 23:01:08

아론 @ : 당신의 대답에 감사드립니다. 이제는 더 잘 이해할 수 있지만 코드를 작동시킬 수는 없습니다. 나는 내가 한 일로 질문을 업데이트했다. 내가 도대체 뭘 잘못하고있는 겁니까? – Zeynel

나는 HTML로 코드를 옮겨야한다고 생각한다. 왜냐하면 페이지가로드되고 메뉴 항목이로드되지 않는 즉시 실행되기 때문이다. 코드를 HTML의 아래쪽으로 옮깁니다. –

@ Alon : 네, 이제 문제가 해결되었습니다. 그러나 또 다른 문제가있었습니다. '.active'의'color : red'는 작동하지 않습니다. 'font-weight : bold; '를 추가했는데 이제는 굵게 만 표시됩니다. 이 굵은 글씨가 왜'.active {color : red; font-weight : bold; 텍스트 장식 : 밑줄; }'? 다시 한 번 감사드립니다! – Zeynel

페이지의 데이터 정렬 유형에 대한 메뉴 항목을 강조 표시하는 방법은 무엇입니까?

답변

관련 문제