javascript - 如何将 anchor 链接列表转换为选择下拉列表，在选项更改时操作更改选项卡？

Question

我有一个 anchor 链接列表，单击时可以成功淡入和淡出选项卡内容。

我需要将此列表转换为移动设备上的选择下拉菜单，并且我不确定如何更新当前设置以以相同的方式运行，除非列表采用下拉格式。

有没有简单的方法可以做到这一点？

Here is a JSFiddle

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>

Answer 1

您可以通过索引找到相关的.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>