ASP.NET MVCアプリケーションのナビゲーションにjQueryタブを使用するにはどうすればよいですか？

Question

私はASP.NET MVCを使用して新しいアプリケーションを作成しています。

私は、ユーザーがアプリケーションのさまざまなモジュールにアクセスできるように、ウィンドウの上部に一連のjQueryタブを使用したいと思います。

共有レイアウトビューにタブを配置して、アプリ全体にタブを複製しないようにしたいとします。

私はのための一貫したソリューションを見つけることができないよう、相反する2つの問題に実行している：私はタブをクリックすると、私はそれにナビゲートするウィンドウ全体をみたい

1. ページに、コンテンツをdivに読み込むのではなく、私は特定のモジュールのブックマークを許可するためにこれをやっています。 （私はアドレスバーに、単に "メインページ" URLではなく、現在のコンテンツのURLを格納したいと思います）。 jQueryは各タブのdivを作成し、hrefの内容をdivにロードしようとします。これで、自分自身の中に入れ子になっているページのコピーが作成されます。ここで

私のタブの定義（デフォルトのレイアウトページから）は、次のとおりです。

<section class="tabs"> 
     <div id="tabs"> 
      <ul> 
       <li><a href="Home" rel="Home">Instructions</a></li> 
       <li><a href="Questions" rel="Questionnaire">Questions</a></li> 
       <li><a href="Submit" rel="SubmitAndConfirm">Finish</a></li> 
       <li><a href="FAQ">FAQ</a></li> 
      </ul> 
     </div> 
    </section> 

そして、ここでは、私はそれらを設定するために使用しているスクリプトです：

function SetupTabs(sel) { 

    $("#tabs").tabs(); 

    $("#tabs").tabs("select", sel); // Selects the tab 
    $('#tabs').tabs({ 
     select: function (event, ui) { 
      location.href = ui.tab.rel; 
     } 
    }); 
} 

これは、実際に取得します私のページは正しくナビゲートされますが、自分自身のページをネストします（上記の問題2）。私がメインページを持ち、部分的なビューを使ってタブからコンテンツを読み込むように並べ替えると、アドレスバーに使用可能なURLがありません（上記＃1の問題）。

アイデアをいただければ幸いです。私はこれがjQueryのタブの設計パラダイムではないことを知っていますが、アプリケーションのどこかでそれらを使用しており、jQuery UIをテーマにした要素をたくさん使用しています。私はそれを動作させることができれば。

おかげ

Answer 1

あなたは、各タブがナビゲーションとして機能するようにクリックしたいので、あなたが代わりのページに移動するように設定クリックイベントでタブのように見えるようにスタイル<ul>を使用し、JQueryUIタブを使用していない検討する必要がありますあなたが望むでしょう。