Question

我正在开发一个自定义解决方案，所以我想我会问社区以前是否有人为此目的使用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>

Answer 1

您可以将每个超链接的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>

这会将每个标签的面板设置为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");
  });
});

jQuery标签，只有一个面板

2 个答案: