我有一个 anchor 链接列表,单击时可以成功淡入和淡出选项卡内容。
我需要将此列表转换为移动设备上的选择下拉菜单,并且我不确定如何更新当前设置以以相同的方式运行,除非列表采用下拉格式。
有没有简单的方法可以做到这一点?
JS:
$("#customer-content .group").hide(); // Initially hide all content
$("#customer-tabs li:first").attr("id","current"); // Activate first tab
$("#customer-content .group:first").fadeIn(); // Show first tab content
$('#customer-tabs li a').click(function(e) {
e.preventDefault();
if ($(this).attr("id") == "current"){ //detection for current tab
return
}
else{
$("#customer-content .group").hide(); //Hide all content
$("#customer-tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$($(this).attr('href')).fadeIn(); // Show content for current tab
}
});
HTML
<ul id="customer-tabs" class="cs-tabs">
<li><a href="#link-1">Link 1</a></li>
<li><a href="#link-2">Link 2</a></li>
<li><a href="#link-3">Link 3</a></li>
</ul>
<div id="customer-content">
<div class="group" id="link-1">
<h2>Title</h2>
<div class="customer-accordion">
Content
</div>
</div>
<div class="group" id="link-2">
<h2>Title 2</h2>
<div class="customer-accordion">
Content 2
</div>
</div>
<div class="group" id="link-3">
<h2>Title 3</h2>
<div class="customer-accordion">
Content 3
</div>
</div>
</div>
最佳答案
您可以通过索引找到相关的.group
,因此使用.index()
来查找所选选项的索引并使用.eq()
按索引选择.group
。
$("#customer-content .group").hide().first().fadeIn();
$('#customer-tabs').change(function(e) {
var i = $(this).find(":selected").index();
$("#customer-content .group").hide().eq(i).fadeIn();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="customer-tabs">
<option selected>Link 1</option>
<option>Link 2</option>
<option>Link 3</option>
</select>
<div id="customer-content">
<div class="group" id="link-1">
<h2>Title</h2>
<div class="customer-accordion">
Content
</div>
</div>
<div class="group" id="link-2">
<h2>Title 2</h2>
<div class="customer-accordion">
Content 2
</div>
</div>
<div class="group" id="link-3">
<h2>Title 3</h2>
<div class="customer-accordion">
Content 3
</div>
</div>
</div>
关于javascript - 如何将 anchor 链接列表转换为选择下拉列表,在选项更改时操作更改选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53280970/