Bootstrap Navbar-選択したアイテムをアクティブに設定
学習中Bootstrap=選択したアイテムを「アクティブ」状態にすることはできません。アクティブ状態はデフォルトのアイテムのままです。新しく選択/クリックしたアイテムは一時的にアクティブに変わりますが、すべての投稿を読みましたが、このコードを機能させることはできませんMVC5とJQuery 2.1を使用しています。
編集： liのhrefをhref = "＃"に変更すると、アクティブなクラスが適切に適用されます。新しいビューが読み込まれるとどうなりますか？セバスチャンの反応は近いと思いますが、エリアスとは面倒です。
マークアップ
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Test</a>
</div>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i>Login
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li class="divider"></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="~/Home">Home</a></li>
<li><a href="~/Home/About">About</a></li>
<li><a href="~/Student">Students Sample</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="~/Admin/Home/Index"">Admin</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /container -->
</div>
<!-- /navbar wrapper -->
スクリプト
<script type="text/javascript">
$(function () {
$('.navbar-nav li').click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
});
</script>
編集：ここに私が投稿した回答といくつかの研究の助けを借りてやったことです
public static string MakeActive(this UrlHelper urlHelper,string action, string controller, string area = "")
{
string result = "active";
string requestContextRoute;
string passedInRoute;
// Get the route values from the request
var sb = new StringBuilder().Append(urlHelper.RequestContext.RouteData.DataTokens["area"]);
sb.Append("/");
sb.Append(urlHelper.RequestContext.RouteData.Values["controller"].ToString());
sb.Append("/");
sb.Append(urlHelper.RequestContext.RouteData.Values["action"].ToString());
requestContextRoute = sb.ToString();
if (string.IsNullOrWhiteSpace(area))
{
passedInRoute = "/" + controller + "/" + action;
}
else
{
passedInRoute = area + "/" + controller + "/" + action;
}
// Are the 2 routes the same?
if (!requestContextRoute.Equals(passedInRoute, StringComparison.OrdinalIgnoreCase))
{
result = null;
}
return result;
}
コントローラをチェックインするか、現在のURLに基づいてアクティブなメニュー項目を表示する必要があります。
これに似た拡張方法があります：
public static string MakeActiveClass(this UrlHelper urlHelper, string controller)
{
string result = "active";
string controllerName = urlHelper.RequestContext.RouteData.Values["controller"].ToString();
if (!controllerName.Equals(controller, StringComparison.OrdinalIgnoreCase))
{
result = null;
}
return result;
}
ビューで次のように使用できます。
<!-- Make the list item active when the current controller is equal to "blog" -->
<li class="@Url.MakeActive("blog")">
<a href="@Url.Action("index", "blog")">....</a>
</li>
ページは実行後にリロードされるため、JavaScriptは機能しません。そのため、ブラウザがリンクをたどっているため、アクティブなアイテムが正しく設定され、ページがロードされます。個人的には、目的のJavaScriptを削除します。サーバー側のコードの代わりにこのクライアント側を実行するには、新しいページがロードされたときにアクティブなアイテムを設定するJavaScriptが必要です。何かのようなもの：
$(document).ready(function() {
$('ul.nav.navbar-nav').find('a[href="' + location.pathname + '"]')
.closest('li').addClass('active');
});
正しいものを選択したことを確認できるように、IDまたは他のクラスをnavbarに追加することをお勧めします。
最も簡単なことは、次のようにコントローラーからViewBagパラメーターを送信することです。
public ActionResult About()
{
ViewBag.Current = "About";
return View();
}
public ActionResult Contact()
{
ViewBag.Current = "Contact";
return View();
}
Cshtmlページで、以下を実行します。
<ul class="nav navbar-nav">
<li class="@(ViewBag.Current == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
<li class="@(ViewBag.Current == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
here の@Damithのご厚意による
任意のビューでこれを行うことができます
<ul class="nav navbar-nav">
@Html.NavigationLink("Link1", "Index", "Home")
@Html.NavigationLink("Link2", "Index", "Home")
@Html.NavigationLink("Link3", "Index", "Home")
@Html.NavigationLink("Links with Parameter", "myAction", "MyController", new{ id=999}, new { @class= " icon-next" })
</ul>
このメソッドを新しいクラスまたは既存のHtmlExtensionsクラスに追加した後
public static class HtmlExtensions
{
public static MvcHtmlString NavigationLink(this HtmlHelper html, string linkText, string action, string controller, object routeValues=null, object css=null)
{
TagBuilder aTag = new TagBuilder("a");
TagBuilder liTag = new TagBuilder("li");
var htmlAttributes = HtmlHelper.AnonymousObjectToHtmlAttributes(css);
string url = (routeValues == null)?
(new UrlHelper(html.ViewContext.RequestContext)).Action(action, controller)
:(new UrlHelper(html.ViewContext.RequestContext)).Action(action, controller, routeValues);
aTag.MergeAttribute("href", url);
aTag.InnerHtml = linkText;
aTag.MergeAttributes(htmlAttributes);
if (action.ToLower() == html.ViewContext.RouteData.Values["action"].ToString().ToLower() && controller.ToLower() == html.ViewContext.RouteData.Values["controller"].ToString().ToLower())
liTag.MergeAttribute("class","active");
liTag.InnerHtml = aTag.ToString(TagRenderMode.Normal);
return new MvcHtmlString(liTag.ToString(TagRenderMode.Normal));
}
}
私はあなたが後方に選択を持っていると信じています。クラスを追加してから兄弟から削除しているので、2番目の削除を実行すると問題が発生すると思います。これを逆にしてみてください：
<script type="text/javascript">
$(function () {
$('.navbar-nav li').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
});
</script>
JavaScript関数は正常に機能するはずです...問題は、リンクがコントローラーにルーティングされ、ページ全体が再ロードされることです。この動作を回避するために、navbar要素がリロードされないように、ボディコンテンツを部分ビューとしてレンダリングできます。 domイベントを処理する関数を記述する必要はありません-それがjavascriptの目的です。
意味を確認するには、コードを変更します。
<li><a href="~/Home/About">About</a></li>
<li><a href="~/Student">Students Sample</a></li>
に：
<li><a href="">About</a></li>
<li><a href="">Students Sample</a></li>