Question

是否有一种简单的js方法可以根据用户从下拉菜单中选择来动态填充div中的选项卡式内容？例如，如果用户选择“选项1”而不是我希望“div 1”显示（所有div包含相同的选项卡式菜单）和所有其他div将被隐藏。

所以div 1工作正常，但是当我切换到div 2时，选项卡式菜单的其他部分停止（不断更改div 1而不是div 2的选项卡）我尝试了各种想法但失败了。

$(document).ready(function() {
  $("#tabs").tabs({
    fx: {
      opacity: 'toggle'
    }
  });



  $('.tab-content').hide();
  //show the first tab content
  $('#tab-1').show();

  $('#select-box').change(function() {
    dropdown = $('#select-box').val();
    //first hide all tabs again when a new option is selected
    $('.tab-content').hide();
    //then show the tab content of whatever option value was selected
    $('#' + "tab-" + dropdown).show();

  });
});

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1'></script>
<script type='text/javascript' src='http://code.jquery.com/ui/1.8.24/jquery-ui.js?ver=1'></script>
<link rel='stylesheet' href='http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css' type='text/css' />





<div class="tab-container">

  <div class="tab-navigation">
    <select id="select-box">
      <option value="1">Option 1r</option>
      <option value="2">Option 2</option>
    </select>
  </div>
</div>


<div id="tabs" class="ui-tabs">
  <ul class="ui-tabs-nav">
    <li class="ui-state-default"><a href="#div1">Features</a>
    </li>
    <li class="ui-state-default"><a href="#div2">Screenshots</a>
    </li>
  </ul>
  <div id="tab-1" class="tab-content">
    <div id="ver-1" class="group" style="display: block;">
      <div id="div1" class="content">
        <p>DIV 1 11.0.2245</p>
      </div>
      <div id="div2" class="content">
        <p>11.0.2253</p>
      </div>
    </div>
  </div>
  <div id="tab-2" class="tab-content">
    <div id="ver-2" class="group" style="display: block;">
      <div id="div1" class="content">
        <p>DIV 1 134.44.2245</p>
      </div>
      <div id="div2" class="content">
        <p>134.44.2255</p>
      </div>
    </div>
  </div>
</div>

根据下拉菜单中的选择更改选项卡内的内容

0 个答案: