2017-07-04 46 views
0

私は次のナビゲーションパネルを持っており、サーバーから取得する変数に基づいて最初に表示するセクションを選択できるようにしたいと考えています。これどうやってするの?通常、各ナビゲーションペイン内のコンテンツを切り替えるには、ボタンをクリックします。 編集:例としてスクリーンショットを参照してください。 Example screen shotナビゲーションパネルの特定セクションを自動的にロード

<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> 
+0

重複質問https://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload-or-hyperlinkかもしれ表示されますか? rq = 1 – amartin

答えて

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

あなたは何を意味するのでしょうか?あなたのjQueryの例では何もしません。 –

+1

jqueryの例を追加しましたが、正確に何を望みますか? –

+0

2つの場所でアクティブなクラスを使用しているソリューションは、私がやっていることに非常に役立ちます。 – amartin

関連する問題