web-dev-qa-db-ja.com

ユーザーが選択したときにナビゲーションバーアイテムをアクティブとして設定するにはどうすればよいですか？

私は新しいASP.NETWebフォーム開発者であり、マスターページでTwitter Bootstrapを使用しようとしています。ユーザーが選択したときにナビゲーションバーアイテムをアクティブに設定するのに苦労しています。簡単なマスターページを作成しました次の方法で このチュートリアル Twitterの使用方法についてBootstrap ASP.NETで。

これが私のマスターページのコードです：

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="container">
            <div class="row-fluid">
                <div class="span12">
                    <div class="page-header">
                        <h1>Hello... My First Website with Twitter Bootstrap</h1>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span3">
                    <ul class="nav nav-list">
                        <li class="nav-header">Navigation</li>
                        <li class="active"><a href="Default.aspx">ASP.NET</a></li>
                        <li><a href="Default2.aspx">Java</a></li>
                        <li><a href="#">VB.Net</a></li>
                        <li><a href="#">C#</a></li>
                    </ul> 
                </div>
                <div class="span9">
                    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
                </div>
            </div>
        </div>

    </div>
    </form>
</body>
</html>

次に、メニューの問題を修正するために、このスクリプトをHeadに追加しました。

<script type="text/javascript">
    $(document).ready(function () {
        var url = window.location.pathname;
        var substr = url.split('/');
        var urlaspx = substr[substr.length - 1];
        $('.nav').find('.active').removeClass('active');
        $('.nav li a').each(function () {
            if (this.href.indexOf(urlaspx) >= 0) {
                $(this).parent().addClass('active');
            }
        });
    });
</script>

ただし、何も変更されていません。ナビゲーションバーからアイテムを選択したときに、アクティブなクラスが新しく選択したアイテムに追加されていないため、理由がわかりません。 この問題の修正を手伝っていただけませんか？

asp.nettwitter-bootstrapmaster-pagesnavbar
10
Android FanBoy

これを使って：

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li class="active"><a href="/Default.aspx">Default</a></li>
                <li><a href="/Clients.aspx">Clients</a></li>
                <li><a href="/_display/">Display</a></li>
            </ul>
        </div>
    </div>
</div>

$(document).ready(function () {
        var url = window.location;
        $('.navbar .nav').find('.active').removeClass('active');
        $('.navbar .nav li a').each(function () {
            if (this.href == url) {
                $(this).parent().addClass('active');
            }
        }); 
    });

例： http://jsfiddle.net/yUdZx/3/

そして、「href」で「Page.ResolveUrl」を使用します

<a href="<%= Page.ResolveUrl("~/Clients.aspx") %>">Clients</a>

それは良いです...

23
Reynaldo

実際、レイナルドはほとんどそれを持っていました...少なくとも私にとっては、彼の例に基づいて、現在のオプションをアクティブにし、前のオプションを非アクティブにすることで、これはかなりうまく機能します。

$(document).ready(function() {
    var url = window.location;                
    $('ul.nav li a').each(function () {
         if (this.href == url) {
              $("ul.nav li").each(function () {
                   if ($(this).hasClass("active")) {
                        $(this).removeClass("active");
                   }
              });
              $(this).parent().addClass('active');
         }
    });
});
4
juanechomon

サブページがある場合、次のコードが機能します。

 $(document).ready(function () {

        $('.navbar .nav').find('.active').removeClass('active');

        var url = window.location.toString();
        var u = url.substring(0, url.lastIndexOf("/")).toString();

        $('.navbar .nav li a').each(function () {

            var hr = this.href.substring(0, this.href.lastIndexOf('/')).toString();

            if ((u == hr) || (u.indexOf(hr) > -1))
            {
                $(this).parent().addClass('active');
                return false;
            }
        });
        // Deactivation to manually add items you have with href = "#" example:
        $('#liSalir').removeClass('active');
});
1
Cesar Alvarado Diaz

これを各コンテンツページに配置し、各ページのナビゲーションアイテムのIDを変更しました（これはJQueryセレクターを使用します）。したがって、これを機能させるには、リストアイテムにIDを指定する必要があります。 「アクティブ」クラスをマスターページに追加しません。コンテンツの読み込み時に適切なクラスを強調表示するだけだからです。

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("[id$=yourNavItemId]").addClass("active");
    });
</script>

注：ナビゲーションバー内のリストアイテムの代わりにASP.NETコントロールを使用している場合、実行時にプレフィックスが付けられ、JavaScriptが探していると思われるIDを見つけられない可能性があります。

1
Troy Carlson

navigation bar with dropdown-menを使用している場合は、マスターページの最後（の本文を閉じる前にスクリプトの下に配置します）：

<script type="text/javascript">
$(document).ready(function () {
    var url = window.location;
    $('ul.nav li a').each(function () {
        if (this.href == url) {
            $("ul.nav li").each(function () {
                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                }
            });
            $(this).parent().parent().parent().addClass('active');
        }
    });
});
</script>

これは完全に私のために働いた。

0
Harshil

必要に応じてコードを変更するために必要な要件を完全に満たすサンプルを作成しました。マスターページでこのjqueryを使用する

 <script type="text/javascript">
        $(function () {
            $('[id*=submenu]').addClass('sub-menu open');
            $('[id*=Master_Pages]').attr("aria-expanded", true);

            $('.subMenus').click(function () {
                localStorage.setItem('lastTab', $(this).attr('id'));
            });
        });
        function pageLoad() {
            var isActiveLink = false;
            $.each($('.subMenus'), function () {
                if ($(this).attr('id') == localStorage.getItem('lastTab')) {
                    $(this).closest('li').addClass('active');
                    localStorage.removeItem('lastTab');
                    isActiveLink = true;
                }
                else {
                    $(this).closest('li').removeClass('active');
                }
            });
            if (!isActiveLink) {
                $('[id*=Master_Designation]').closest('li').addClass('active');
            }
        }
    </script>
0
Prithvi Raj Nandiwal
var windowUrl = window.location.href.toLowerCase();
//var windowUrl = window.location.href.toLowerCase().split('.')[0];
setTimeout(function () {
    var windowUrl = window.location.href.toLowerCase();
    $('#nav li').removeClass('active');
    $('#nav li').each(function (index) {
        pageUrl = $(this).find('a').attr('href');
        if (windowUrl.indexOf(pageUrl) > -1) {
            $(this).addClass('active');
        }
    });
}, 10);
0
Ramil Mammadov

私はこの投稿が古いことを知っていますが、

    $(document).ready(function () {

    var url = window.location;
    $('ul.nav li a').each(function () {
        if (this.href == url) {
            $("ul.nav li").each(function () {
                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                }
            });
            $(this).parents().addClass('active');
        }

    });

});

あなたもすべての親をアクティブにしたいので。

0
Stefan van de Laarschot

サーバー側の実装を好む私自身の場合は、関心のあるliタグをrunat = "server"に変換します。 Master.Pageファイル。問題のコードは次のようになります。

 <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item" runat="server" id="tabHome" >
                        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item" runat="server" id="tabContact">
                        <a class="nav-link" href="/Contact">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" runat="server">Hello, <asp:LoginName runat="server" />
                        </a>
                    </li>
                </ul>
            </div>

次に、マスターページの背後にあるコード（使用する言語に応じてSite.Master.vbまたはSite.Master.cs）で、PageLoadイベントに以下を追加します。

VB.Netの実装：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim thisURL As String = Request.Url.Segments(Request.Url.Segments.Count - 1)

    Select Case thisURL
        Case "Default", "default.aspx"  
            tabContact.Attributes.Remove("active")
            tabHome.Attributes.Add("class", "active")
        Case "Contact"
            tabHome.Attributes.Remove("active")
            tabContact.Attributes.Add("class", "active")
    End Select
End Sub

C＃の実装：

Protected void Page_Load(Object sender, EventArgs e)
  {
    String thisURL = 
    Request.Url.Segments(Request.Url.Segments.Count - 1);

    switch (thisURL)
    {
        Case "Default":
        Case "default.aspx": 
            {
                tabContact.Attributes.Remove("active");
                tabHome.Attributes.Add("class", "active");
                break;
            }

        Case "Contact" : 
            {
                tabHome.Attributes.Remove("active");
                tabContact.Attributes.Add("class", "active");
                break;
            }
    }
}

「Default.aspx」は最初に開かれるはずのページなので、ユーザーがWebサイトに入るとすぐに、「ホーム」メニュー項目が強調表示されます。以下に例を示します。

enter image description here

簡単にするために、この例では2つのナビゲーションバー項目のみを使用しましたが、さらに必要な場合は同じロジックを実装できます。

お役に立てば幸いです。

0
José Lugo