jQueryタブ、ただ1つのパネルを持つ複数のタブ

Question

私はカスタムソリューションに取り組んでいます。だから私は以前にこの目的のために誰かがjQueryタブを使っているのかコミュニティに尋ねると思っていました。

私は1つのメインパネル、入力があるフォームを持っています。基本的に異なるレコードを識別する複数のタブがあります。すべてのレコードはこのフォームを使用します。なぜなら、各タブではなく、一度だけロードするという理由です。

私は行きたい方向の基本的な例を示します。あなたが見ることができるように、3つのタブがありますが、パネルは1つだけです。私はクリックするタブに応じてコンテンツをthe_inputに動的にロードしたいと思います。だから、私はパネルを切り替えるだけでなく、各クリックで選択されたタブをしたくない。

私はbeforeActivate（http://api.jqueryui.com/tabs/#event-beforeActivate）イベントをキャッチし、どのタブが選択されたかを特定し、それに従って1ビジュアルパネルを動的に変更する必要があると考えていました。

コードが本当にあなたがこれはそれぞれのパネルを設定します

下

<ul> 
    <li><a href="#bol_new">New</a></li> 
    <li><a href="#bol_new">record 1</a></li> 
    <li><a href="#bol_new">record 2</a></li> 
</ul> 

としてbol_newするために、各ハイパーリンクのHREFを設定することができ

jQuery(function($){ 
 
    $("#tabs").tabs({ 
 
    beforeActivate(event, ui) { 
 
     $('#msg').append('<p>'+ui.newPanel+'</p>'); 
 
     //I figure what I want to do here is catch the ID of the selected tab, and use that to dynamically load content to the tab. 
 
    } 
 
    }); 
 
    
 
    function fill_input(selector){ 
 
    if (selector == 1) { 
 
     $('#the_input').val(1); 
 
    }else if (selector == 2) { 
 
     $('#the_input').val(2); 
 
    }else{ 
 
     $('#the_input').val(); 
 
    } 
 
    } 
 
    
 
})

<script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#bol_new">New</a></li> 
 
    <li><a href="#bol_1">record 1</a></li> 
 
    <li><a href="#bol_2">record 2</a></li> 
 
    </ul> 
 
    <div id="bol_new"> 
 
    <form> 
 
     <input id="the_input"> 
 
    </form> 
 
    </div> 
 
</div> 
 
<div id="msg"> 
 

 
</div>

Answer 1

が動作していませんタブをid = "bol_new"の同じdivに変更します

テスト：https://plnkr.co/edit/EGtCnmNr0c28AaT647SP?p=preview

Answer 2

私はちょうどCSSでタブを模擬することをお勧めします。その後、必要に応じてフォームを操作できます。

の作業例：https://jsfiddle.net/Twisty/j63uvk4q/

HTML

<div id="tabs" class="ui-tabs ui-corner-all ui-widget ui-widget-content"> 
    <ul class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header"> 
    <li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active"> 
     <a href="#bol_new" class="ui-tabs-anchor">New</a> 
    </li> 
    <li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab"> 
     <a href="#bol_1" class="ui-tabs-anchor">Record 1</a> 
    </li> 
    <li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab"> 
     <a href="#bol_2" class="ui-tabs-anchor">Record 2</a> 
    </li> 
    </ul> 
    <div id="bol_new" class="ui-tabs-panel ui-corner-bottom ui-widget-content"> 
    <form> 
     Record: 
     <input id="the_input"> 
    </form> 
    </div> 
</div> 
<div id="msg"> 
</div> 

はJavaScript

var myData = { 
    records: { 
    bol_1: "Homer Simpson", 
    bol_2: "Marge Simpson" 
    } 
} 
$(function() { 
    $("#tabs .ui-tabs-nav li").click(function(e) { 
    e.preventDefault(); 
    $("#tabs li.ui-state-active").toggleClass("ui-tabs-active ui-state-active"); 
    $(e.target).parent().addClass("ui-tabs-active ui-state-active"); 
    var id = $(e.target).attr("href").substring(1); 
    $("#the_input").val(myData.records[id]); 
    }); 
    $("#tabs .ui-tabs-nav .ui-tabs-tab").hover(function(e) { 
    $(this).toggleClass("ui-state-hover"); 
    }, function(e) { 
    $(this).toggleClass("ui-state-hover"); 
    }); 
});