ページ全体をリフレッシュせずにタブを表示

Question

私のPHPページには次のコードがあります。これらは、InboxとsInboxの2つのタブです。ユーザーがクリックすると、ページ全体がリフレッシュされて他のタブに移動します。これらのタブを作成する方法はありますか？ユーザーがタブの1つをクリックするとページが更新されません。私が初心者であるので、答えるとき完全なコード例を提供してください。

<ul id="topTabs"> 
     <li class="selected"><a href="acc/inbox"> Inbox </a></li> 
    <li><a href="acc/sinbox"> sInbox </a></li> 
</ul> 

Answer 1

最も簡単な方法の1つはjQuery UI tabsです。初心者にやさしい詳細なチュートリアルhereがあります。

Answer 2

これを行うには、ajaxが必要だとは言いません。 Ajaxは、これらのタブの内容を動的にロードする場合にのみ必要です。 jQueryを使うことができるタブスイッチング、または単にスタイルプロパティ "display：block" respを実現することを実現してください。 "display：none"。

Answer 3

（ページ構造を変更する必要があるため）いくつかのコードを提供するのは非常に難しいですが、ヒントとして、jQuery ajaxまたはphp ajax更新パネルを使用する必要がありますあなたのページのいくつかの部分をリフレッシュする（ASP.NET全体ではなく）。

以前のケース（jQuery）では、リンクはリダイレクトリンクではなく、ajaxを使用してページの更新をリクエストするリンクアクションを持っています。

jQueryを使用したajaxの使用例のリンクを参照してください。

Answer 4

あなたは、AJAXを使用してイースリーそれを行うことができます。

tab1のは、要素ウィッヒのIDが jQuery PageでのjQueryのAjaxにcontentprovider.phpから

さらに詳しい情報コンテンツを受け取ることがある

 $(document).ready(function() { 
      $("#topTabs li").click(function() {   
       var mode = $(this).find("a").attr("href"); 
       $.ajax({ 
        url: 'contentprovider.php', 
        data: {mode:mode}, 
        success: function(data){ 
         $('#tab1').html(data); 
        } 
       }); 
      }); 
     }); 

。

gl Paulo Bueno。