Как после выбора в select отобразить соответствующее содержимое?

231

09 июня 2018, 00:50

Как переписать скрипт, чтобы вкладки работели с тегом select? Т.е. при выборе нужного option отображало соответствующее содержимое.

$(".tab_item").not(":first").hide(); 
$(".wrapper .tab").click(function() { 
    $(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active"); 
    $(".tab_item").hide().eq($(this).index()).fadeIn() 
}).eq(0).addClass("active");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrapper"> 
    <div class="tabs"> 
        <span class="tab">Вкладка 1</span> 
        <span class="tab">Вкладка 2</span> 
        <span class="tab">Вкладка 3</span>         
    </div> 
    <div class="tab_content"> 
        <div class="tab_item">Содержимое 1</div> 
        <div class="tab_item">Содержимое 2</div> 
        <div class="tab_item">Содержимое 3</div> 
    </div> 
</div>

Answer 1

$(".tab_item").not(":first").hide(); 
 
$(".tabs").change(function() { 
  $(".tab_item").hide().eq($(this).val()).fadeIn(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrapper"> 
  <select class="tabs"> 
    <option value="0">Вкладка 1</option> 
    <option value="1">Вкладка 2</option> 
    <option value="2">Вкладка 3</option> 
  </select> 
</div> 
<div class="tab_content"> 
    <div class="tab_item">Содержимое 1</div> 
    <div class="tab_item">Содержимое 2</div> 
    <div class="tab_item">Содержимое 3</div> 
</div>