0

順序付けられていないリストで構成された MasterPage にメニューがあります。選択したタブの色を変更するために JavaScript を使用しようとしています。アンカー タグに href="#" がある場合は問題なく動作しますが、別のページへの実際のリンクを配置すると、カラー タブがホームページに戻ります。選択時に listitem id を onlink に変更します。私は行き止まりの答えで数日間探してきました。これに対する明確な解決策はありますか？

メニューでstackoverflowはどのようにこれを達成しますか? [質問] [タグ] [ユーザー] [バッジ] [未回答]

メニューの HTML

  <div id="navbar">
        <ul id="menulist">
            <li><a onclick="SelectedTab(this);" href="Default.aspx" id="onlink">Home</a></li>
            <li><a href="#" id="">View</a></li>
            <li><a onclick="SelectedTab(this);" href="About.aspx" id="">About</a></li>
            <li><a onclick="SelectedTab(this);" href="Contact" id="">Contact</a></li>
        </ul>
  </div>

Javascript

  <script type="text/javascript">
    function SelectedTab(sender) {
        var aElements = sender.parentNode.parentNode.getElementsByTagName("a");
        var aElementsLength = aElements.length;
        var index;
        for (var i = 0; i < aElementsLength; i++) {
            if (aElements[i] == sender)        
            {
                index = i;
                aElements[i].id = "onlink";
            } else {
                aElements[i].id = "";
            }
        }
    }
</script>

選択したタブの CSS

...stuff

#navbar ul li a#onlink
{
   background: #FFF;
   color: #465c71;
}
#navbar ul li a#onlink:hover 
{
   background: #FFF;
   color: #465c71;

...more stuff
4

1 に答える 1

3

実際にそのページに移動するときに、選択したリンクを設定する必要があります。このようなことを試してください。

$(function(){
    var url=document.location.href;
    $("div#navbar ul#menulist li a").each(function(){
            var t=$(this).attr("href");
            if(t && url.indexOf(t)>0){
                $(this).addClass("onlink");
            }
    });
});

navbarとmenulistがレンダリングされた要素の ID であるかどうかを確認してください。それ以外の場合は、'ClientIdMode="Static"' を使用するか、ID を取得するために使用する必要がdivありulます'<%= navbar.ClientID%>'。ここで実際の例を参照してください: jsfiddle

CSSまた、次の代わりに、にわずかな変更を加える必要があります。

 #navbar ul li a#onlink

使ってください：

 #navbar ul li a.onlink
于 2012-10-19T17:33:55.753 に答える