6

(ASP.NET Web サイトの)内部にメニューがありmasterpage、マスターページ メニューとサブメニューでアクティブなページを強調表示したいと考えています。

HTML:

<ul id="nav" class="sf-menu">
    <li class="current-menu-item"><a href="index.html">Home</a></li>    
    <li><a href="page.html">menu-2</a>
       <ul>
          <li><a href="page-full.html">full</a></li>
          <li><a href="page-features.html">featurs</a></li>
          <li><a href="page-typography.html">typography</a></li>
       </ul>
    </li>
</ul>

CSS:

#nav>li.current-menu-item>a,
#nav>li.current_page_item>a{
    color: #fe8300;
}

前もって感謝します。

4

6 に答える 6

2

これを行うには多くの方法があります。いくつかの簡単なものといくつかの醜いハッキーなものがあります:

解決策 1: メニュー コントロールを使用します。標準の .NET メニュー コントロールには、これを行うための簡単なソリューションがあります。私の意見では、これが最もクリーンで最速のソリューションです。この投稿を見てください。このソリューションを選択すると、おそらく役立つでしょう。

解決策 2: ある種の JavaScript を使用して、現在のアイテムを強調表示することができます。自分ですべてを書きたくない場合は、jQuery を使用すると簡単になります。このソリューションについては、このページをご覧ください。時代遅れですが、まだ効果的です。

解決策 3: これはちょっと見苦しい解決策であり、さまざまな方法で実行できます。<a>要素を HyperLink コントロールに変更し、クリックしたときにある種のセッションまたは Cookie を設定することができます。設定すると、Cookie の値に基づいてスタイルを変更できます。

これを解決する方法は他にもありますが、最初の 2 つの解決策が役立つと思います。

于 2013-06-12T09:06:44.480 に答える
1

URLを確認してhtmlファイル名を取得し、それを比較してcssクラスをマスターページに設定するか、メニューUserControlを分離してマスターページに配置します。

アンカータグをハイパーリンクに変更する必要があります

asp.net マークアップ:

<li><asp:HyperLink runat="server" ID="lnk_full" NavigateUrl="page-full.html" Text="full" /></li>
<li><asp:HyperLink runat="server" ID="lnk_features" NavigateUrl="page-features.html" Text="features" /></li>
<li><asp:HyperLink runat="server" ID="lnk_typography" NavigateUrl="page-typography.html" Text="typography" /></li>

コードビハインド:

protected void SelectMenu()
    {
        try
        {
            string page = Path.GetFileNameWithoutExtension(Request.AppRelativeCurrentExecutionFilePath);
            string pageDirectory = Path.GetDirectoryName(Request.AppRelativeCurrentExecutionFilePath);

            string category = Request.QueryString.Count>0 ? Request.QueryString[0] : string.Empty;
            if (pageDirectory.Length > 3)
            {
                pageDirectory = pageDirectory.Substring(2, pageDirectory.Length - 2);
            }
            if (pageDirectory != null && pageDirectory.Length > 0 && page != null && page.Length > 0)
            {
                switch (pageDirectory)
                {
                    case "Secure\\Clients":
                        switch (page)
                        {
                            case "page-full":
                                lnk_full.CssClass = "current-menu-item";
                                break;
                            case "page-features":
                                lnk_features.CssClass = "current-menu-item";
                                break;
                            case "page-typography":
                                lnk_typography.CssClass = "current-menu-item";
                                break;
                        }
                        break;
                }
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

Web ページがルート ディレクトリにある場合は、pageDirectory. クエリ文字列を使用している場合は、に切り替えることができますcategory。これがお役に立てば幸いです。

于 2013-06-13T07:17:02.273 に答える
0 
$(function () {
        $(".navbar‐btn a").each(function () {
            var hreff = this.href.trim().split("/").splice(3, 4);

            if (hreff.length > 1)
                hreff.splice(0, 1);

            if (hreff[0] == window.location.pathname.split("/").splice(1, 1)[0])
                $(this).parent().addClass("active");
        });
    })
于 2015-12-14T15:31:31.743 に答える
0

これは、開発中およびローカルでは問題なく機能しますが、IIS でホストすると、メニューのアクティブな強調表示が機能しません。ここで何が欠けていますか？以下のマスターページコード

$(document).ready(function () {
        //You can name this function anything you like
        function activePage() {
            //When user lands on your website location.pathname is equal to "/" and in 
            //that case it will add "active" class to all links
            //Therefore we are going to remove first character "/" from the pathname
            var currentPage = location.pathname;
            var slicedCurrentPage = currentPage.slice(1);
            //This will add active class to link for current page
            $('.nav-link').removeClass('active');
            $('a[href*="' + location.pathname + '"]').closest('li').addClass('active');
            //This will add active class to link for index page when user lands on your website
            if (location.pathname == "/") {
                $('a[href*="index"]').closest('li').addClass('active');
            }
        }
        //Invoke function
        activePage();
    });
于 2019-09-09T07:00:32.087 に答える