jQuery Tabs，只有一個面板的多個選項卡

我正在開發一個自定義解決方案，所以我想問問社區是否有人在此之前使用過jQuery Tabs。jQuery Tabs，只有一個面板的多個選項卡

想法是這樣的：我有一個主面板，一個輸入表單。有多個選項卡基本上可以識別不同的記錄。所有的記錄都會使用這個表單，這就是爲什麼我只想加載一次，而不是每個標籤。

我舉了一個我想去的方向的基本例子。正如你可以看到有3個標籤，但只有一個面板。我想動態加載內容到the_input取決於我點擊哪個標籤。所以我甚至不想切換面板，只需在每次點擊時選中選項卡。

我在想我需要趕上beforeActivate（http://api.jqueryui.com/tabs/#event-beforeActivate）事件，確定選擇了哪個選項卡，並相應地動態更改1可視化面板。

的代碼是不是真的工作

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>

來源

2017-05-17 jeffery_the_wind

你可以只添加適當的類的元素，使其具有的外觀和感覺標籤，然後將自己的'click'回調綁定到選項卡。 – Twisty

您可以設置在href每個超鏈接bol_new作爲下

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

這將設置爲每個面板標籤到同一個div與id =「bol_new」

測試：https://plnkr.co/edit/EGtCnmNr0c28AaT647SP?p=preview

來源

2017-05-17 17:28:42

我會建議嘲笑與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"); 
    }); 
});

來源

2017-05-17 18:14:15 Twisty

jQuery Tabs，只有一個面板的多個選項卡

回答

相關問題