Question

我在桌面视图上设置了选项卡，以便用户在内容之间切换。但是在移动设备上，我需要使用其他行为，因为标签标题被隐藏了，而我需要使用“选择”下拉列表来切换内容。

使用in active类显示选项卡内部内容以显示相关图像，并且每个面板的ID为tab-pane{{ loop.index }}。

因此，每次更改下拉列表时，我都需要移动in active类。

“选择”字段的ID为id="floorplanSelect"

这是我的jquery代码的开始，如果只有两个选项卡，则可以使用，但如果没有更多选项卡，则可以，所以有人可以帮忙，因为我只是javascript的初学者：

<!-- Tab panes -->
<div class="tab-content">
  {% for row in block.floorplans %}
  <div role="tabpanel" class="tab-pane fade{% if loop.first %} in active{% endif %}" id="tab-pane{{ loop.index }}">
    ...tab content...
  </div>
  {% endfor %}
</div>
<!-- End tabs -->

<!-- Select dropdown -->
<select id="floorplanSelect" class="form-control" name="floorplan">
  {% set floorplan = craft.request.getParam('floorplan') %}
  {% for rows in block.floorplans %}
  <option value="{{ rows.tabHeading.value }}" name="tab-pane{{ loop.index }}">{{ rows.tabHeading.label }}</option>
  {% endfor %}
</select>
<!-- End Select -->

<script type="text/javascript">
$('#floorplanSelect').change(function(){
  $('.tab-pane').toggleClass( "active in" );
})
</script>

下面是一个屏幕截图，可帮助您理解我的指称。

Screenshot of html for reference

Answer 1

您非常亲密。我已经删除了您的代码，使其能够与纯HTML一起使用JS。请注意，有更好的方法可以做到这一点。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade active in" id="tab-pane1">
    ...tab content1...
  </div>
  <div role="tabpanel" class="tab-pane fade" id="tab-pane2">
    ...tab content2...
  </div>
  <div role="tabpanel" class="tab-pane fade" id="tab-pane3">
    ...tab content3...
  </div>
</div>
<!-- End tabs -->

<!-- Select dropdown -->
<select id="floorplanSelect" class="form-control" name="floorplan">
  <option value="tab-pane1">tab1</option>
  <option value="tab-pane2">tab2</option>
  <option value="tab-pane3">tab3</option>
</select>
<!-- End Select -->

<script type="text/javascript">
  $('#floorplanSelect').on('change', function(e) {
    $('.tab-pane').removeClass('active in')
    $('#' + $(e.currentTarget).val()).addClass("active in");
  })
</script>

使用选择下拉菜单在标签之间切换

1 个答案: