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帮助程序。有关详细信息，请参阅此处接受的答案：How to add "active" class to Html.ActionLink in ASP.NET MVC

修改

不确定你想要什么，也许这有帮助？

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

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

1 个答案: