自动加载导航面板的特定部分

Question

我有以下导航面板，希望能够根据从服务器获得的变量选择我首先显示的部分。我怎样才能做到这一点？通常，您通过单击按钮在每个导航窗格内的内容之间切换。 编辑：请参阅屏幕截图以获取示例。

<div class="hr-divider m-y-md">
  <ul class="nav nav-pills hr-divider-content hr-divider-nav" role="tablist">
    <li class="active" role="presentation">
        <a href="#Overview" role="tab" data-toggle="tab" aria-controls="Overview" aria-expanded="false" id="navpanel1">Nav Panel 1</a>
    </li>
    <li role="presentation" class="">
        <a href="#Tasks" role="tab" data-toggle="tab" aria-controls="Tasks" aria-expanded="true" id="navpanel2">Nav Panel 2</a>
    </li>
    <li role="presentation" class="">
        <a href="#IssuesNotes" role="tab" data-toggle="tab" aria-controls="IssuesNotes" aria-expanded="true" id="navpanel3">Nav Panel 3</a>
    </li>
  </ul>
</div>

<div role="tabpanel" class="tab-pane active" id="Nav Panel 1 Content">
  //content
</div>
<div role="tabpanel" class="tab-pane active" id="Nav Panel 2 Content">
  //content
</div>
<div role="tabpanel" class="tab-pane active" id="Nav Panel 3 Content">
  //content
</div>

Answer 1

您需要将条件运算符的一些变量传递给您的视图。

控制器：

public ActionResult Index(string variable)
{
    switch (variable)
    {
        case "Overview":
        {
            ViewBag.Selected = "Overview";
            break;
        }
        case "Tasks":
        {
            ViewBag.Selected = "Tasks";
            break;
        }
        case "IssueNotes":
        {
            ViewBag.Selected = "IssueNotes";
            break;
        }
        default:
        {
            ViewBag.Selected = "IssueNotes";
            break;
        }
    }

    return View();
}

查看：

<div class="hr-divider m-y-md">
    <ul class="nav nav-pills hr-divider-content hr-divider-nav" role="tablist">
        <li class="@(ViewBag.Selected == "Overview" ? "active" : "")" role="presentation">
            <a href="#Overview" role="tab" data-toggle="tab" aria-controls="Overview" aria-expanded="false">Overview</a>
        </li>
        <li class="@(ViewBag.Selected == "Tasks" ? "active" : "")" role="presentation">
            <a href="#Tasks" role="tab" data-toggle="tab" aria-controls="Tasks" aria-expanded="true">Tasks</a>
        </li>
        <li class="@(ViewBag.Selected == "IssueNotes" ? "active" : "")" role="presentation">
            <a href="#IssuesNotes" role="tab" data-toggle="tab" aria-controls="IssuesNotes" aria-expanded="true">IssuesNotes</a>
        </li>
    </ul>
</div>

<div class="tab-content clearfix">
    <div role="tabpanel" class="@(ViewBag.Selected == "Overview" ? "tab-pane active" : "tab-pane")" id="Overview">
        //Nav Panel 1 Content
    </div>
    <div role="tabpanel" class="@(ViewBag.Selected == "Tasks" ? "tab-pane active" : "tab-pane")" id="Tasks">
        //Nav Panel 2 Content
    </div>
    <div role="tabpanel" class="@(ViewBag.Selected == "IssueNotes" ? "tab-pane active" : "tab-pane")" id="IssuesNotes">
        //Nav Panel 3 Content
    </div>
</div>

注意：我在简单示例中使用了 ViewBag 值，但如果模型值已经被传递给视图，您也可以使用它（例如 class="@(Model.Value == "Overview" ? "active" : "")" ）

这对于一些选项卡来说是一个不错的解决方案，但对于更强大的解决方案，您可以实现一个 HTML Helper。请参阅此处接受的答案以获取更多信息：How to add "active" class to Html.ActionLink in ASP.NET MVC

编辑：

不确定您到底想要什么，也许这有帮助？

$(document).ready(function () {
    $("li a").on('click', function() {
        alert($(this).attr('href'));
    });
});