ナビゲーションパネルの特定セクションを自動的にロード

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')); 
    }); 
});