ロードしたページに対応するリスト項目に「現在の」クラスを追加するために何かをする必要があります。次に、持っている CSS を使用して、次のようなことを行うことができます。
.second-level-menu-vertical li a:hover, .second-level-menu-vertical li.current a {
background-color: #FDCC00;
border-radius: 7px;
color: #000;
text-decoration: none;
}
そのクラスは、Javascript (クライアント側) またはメニュー生成 ASP.NET コード (分離コード経由) のいずれかで追加できます。 CSS。
編集済み
このマークアップを考えると：
<div class="second-level-menu-vertical">
<ul class="top-level">
<li><a href="K-5th-Grades.aspx">K-5th Grades</a></li>
<li><a href="6th-grade.aspx">6th Grade</a></li>
<li><a href="7th-grade.aspx">7th Grade</a></li>
<li><a href="8th-grade.aspx">8th Grade</a></li>
<li><a href="9th-grade.aspx" class="selected">9th Grade</a></li>
<li><a href="10th-grade.aspx">10 Grade</a></li>
<li><a href="11th-grade.aspx">11th Grade</a></li>
<li><a href="12th-grade.aspx">12th Grade</a></li>
<li><a href="college-checklist.aspx">College Checklist</a></li>
<li><a href="savings-growth-calculator.aspx">Savings Growth Calculator</a></li>
</ul>
</div>
（注意してください、説明のために選択したクラスをそこに入れました... jQueryまたはJavascriptのアプローチを取っている場合、それはマークアップジェネレーターにあるべきではありません。それをマークアップジェネレーターに入れることができれば、 Javascript アプローチが必要です!)
変更された CSS は次のとおりです。
.second-level-menu-vertical {
float: left;
font:bold 110% 'verdana', sans-serif;
margin-left: -10px;
margin-top: 57px;
text-transform: lowercase;
width: 155px;
z-index: 200;
position: absolute;
}
.second-level-menu-vertical ul {
padding-bottom: 10px;
}
.second-level-menu-vertical li {
background: none;
margin: 0;
padding: 0 0.75em;
}
/* Don't forget LoVe-HAte to set the default styles for non-hover states */
.second-level-menu-vertical li a,
.second-level-menu-vertical li a:link,
.second-level-menu-vertical li a:visited,
.second-level-menu-vertical li a:hover,
.second-level-menu-vertical li a:active {
border-bottom: 1.75px dashed #C9C9C9;
color: #666;
display: block;
padding: 1em 0;
text-decoration: none;
}
.second-level-menu-vertical li a:hover,
.second-level-menu-vertical li a.selected,
.second-level-menu-vertical li a.selected:link,
.second-level-menu-vertical li a.selected:visited,
.second-level-menu-vertical li a.selected:hover,
.second-level-menu-vertical li a.selected:active {
background-color: #FDCC00;
border-radius: 7px;
color: #000;
text-decoration: underline;
}
これが機能するために必要な非常に単純な jQuery を次に示します。サイトで現在使用している URL に基づいて、いくつかの仮定が立てられます。そのうちの 1 つは、これらの URL のいずれにもクエリ文字列がなく、常に特定のhref をメニューに追加します。
// you want the path of the location,
// as that should not include the querystring,
// if you have one
var pathGroup = location.pathname.split("/");
// split it by the / character
// then get the last element... this should be your
// current page name
var currentPage = pathGroup[pathGroup.length - 1];
// This selector finds the a tag that
// has an href matching your currentPage
// variable. It then adds a selected class
// to that a tag
var menuItems = $(".second-level-menu-vertical li a[href~='" + currentPage + "']").addClass("selected");
通常の JavaScript を使用してこれを取得するのは、もう少し複雑であることに注意してください。上記のサンプルは jsFiddle ( http://jsfiddle.net/mori57/dDsjf/ ) で見ることができますが、リンクできないため、明らかにそこでは機能しません (ただし、読みやすいかもしれません)。あなたのサイトを正しく。
非 jQuery Javascript アプローチ ( http://jsfiddle.net/mori57/rQXBV/2/ ):
// you want the path of the location,
// as that should not include the querystring,
// if you have one
var pathGroup = location.pathname.split("/");
// split it by the / character
// then get the last element... this should be your
// current page name
var currentPage = pathGroup[pathGroup.length - 1];
// get the top level element, and get the first
// element returned, as getElementsByClassName
// returns an array
var sideMenu = document.getElementsByClassName("second-level-menu-vertical")[0];
// get all the li items from that item
var sideLinks = sideMenu.getElementsByTagName("li");
// loop through the list returned
for(var link in sideLinks){
// make sure that you're dealing with an object
if(typeof sideLinks[link] == "object"){
// get the <a/> tag from inside the li
var aTag = sideLinks[link].getElementsByTagName("a")[0];
// get the <a/> tag's href
var href = aTag.getAttribute("href");
if(href == currentPage){
// if the href matches your currentPage
// value, set the class to 'selected'
aTag.setAttribute("class","selected");
}
}
}