使用选择下拉列表在选项卡之间切换

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>

下面是一个屏幕截图，以帮助理解我所指的内容。

供参考的 html 屏幕截图

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>