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

40
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>

READ ALSO
Транслитерация в input поле

Транслитерация в input поле

Как сделать, чтоб при вводе в это поле русских символов проходила транслитерация, и пробелы менялись символом "-"?

29
jQuery.getJSON() возвращает не те данные

jQuery.getJSON() возвращает не те данные

Здравствуйте уважаемые знатоки, вопрос такой: Мне на сайте WP в sidebar нужно вывести 2 виджета, для этого я использую разные файлы JS в которых...

36
Как закрыть VideoCapture в EmguCV

Как закрыть VideoCapture в EmguCV

В первый раз все считывается нормальноВо второй уже программа закрывается

38
Организация потоков TCPClient

Организация потоков TCPClient

Я занимаюсь разработкой игрового сервераЧерез TCPListener я принимаю клиентов

38