Как переделать код на попроще?

Question

[Антон]

Чекбоксами показываю тот или иной div. Это работает.
Написал, но уверен, что можно JS переписать на более изящный код, а не вот эта "многоэтажка".
Подскажите - как можно изменить JS?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.newtabs div {min-height: 700px;
    border: 2px solid red;
    padding: 10px;
    margin: 20px auto;
    max-width: 1200px;
    min-width: 320px;
    width: auto;
    position: relative;}
</style>
<label><input type="radio" id="rad1" value="1" name="rad" class="rad" checked/> Один</label>
<label><input type="radio" id="rad2" value="2" name="rad" class="rad" /> Два</label>
<label><input type="radio" id="rad3" value="3" name="rad" class="rad" /> Три</label>
<label><input type="radio" id="rad4" value="4" name="rad" class="rad" /> Четыре</label>
<div class="newtabs">
<div class="tabs1">111111111111</div>
<div class="tabs2">222222222222</div>
<div class="tabs3">333333333333</div>
<div class="tabs4">444444444444</div>
</div>
<script>
$('.rad').on('change', function() {
if ($('#rad1').is(':checked')) {
    $('.tabs1').show();
    $('.tabs2').hide();
    $('.tabs3').hide();
    $('.tabs4').hide();
  } 
if ($('#rad2').is(':checked')) {
    $('.tabs1').hide();
    $('.tabs2').show();
    $('.tabs3').hide();
    $('.tabs4').hide();
  } 
if ($('#rad3').is(':checked')) {
    $('.tabs1').hide();
    $('.tabs2').hide();
    $('.tabs3').show();
    $('.tabs4').hide();
  } 
if ($('#rad4').is(':checked')) {
    $('.tabs1').hide();
    $('.tabs2').hide();
    $('.tabs3').hide();
    $('.tabs4').show();
  } 
}).trigger('change');
</script>

Comments

[Рональд Макдональд]

Вот, о чём я постоянно говорю. Вот оно.

Answer 1

[Rsa97]

<label><input type="radio" value="1" data-link='.tabs1' name="rad" class="rad" checked/> Один</label>
<label><input type="radio" value="2" data-link='.tabs2' name="rad" class="rad" /> Два</label>
<label><input type="radio" value="3" data-link='.tabs3' name="rad" class="rad" /> Три</label>
<label><input type="radio" value="4" data-link='.tabs4' name="rad" class="rad" /> Четыре</label>
<div class="newtabs">
<div class="tabs tabs1">111111111111</div>
<div class="tabs tabs2">222222222222</div>
<div class="tabs tabs3">333333333333</div>
<div class="tabs tabs4">444444444444</div>
</div>
<script>
$('.rad').on('change', function() {
  $('.tabs').hide();
  $($(this).data('link')).show();
});
</script>

Answer 2

[Антон Шаманов]

скрывать по классу, а текущий получать через $(this)

Answer 3

[Сергей]

можно обернуть label в какой-нибудь контейнер, например: newtabs-trigger.
Классами управлять состоянием табов.

Вот такую структуру можно сделать:

<div class="newtabs-trigger">
    <label><input type="radio" id="rad1" value="1" name="rad" class="rad" checked /> Один</label>
    <label><input type="radio" id="rad2" value="2" name="rad" class="rad" /> Два</label>
    <label><input type="radio" id="rad3" value="3" name="rad" class="rad" /> Три</label>
    <label><input type="radio" id="rad4" value="4" name="rad" class="rad" /> Четыре</label>
</div>

<div class="newtabs-container">
    <div class="tab is-active">111111111111</div>
    <div class="tab">222222222222</div>
    <div class="tab">333333333333</div>
    <div class="tab">444444444444</div>
</div>

<script>
// отталкиваемся от документа, на случай, если будет ajax-запрос, чтобы скрипт не отвалился
$(document).on('click touch', '.newtabs-trigger label', function () {
       
       //тут мы определяем индекс элемента, по которому пришелся клик
        var index = $(this).index();

         // убираем у всех класс active(в css нужно прописать на класс active нужные свойства)
        $('.newtabs-container .tab').removeClass('is-active');

       // проверяем у каждого .tab индексы и сравниваем с индексом label
        $('.newtabs-container .tab').each(function () {
            if ($(this).index() == index) {
                /* если индексы совпадают, то ставим на .tab класс .is-active и показываем его.
                   Например, на .tab.active стоит display: block, а по умолчанию у блока стоит display: none;) */
                $(this).addClass('is-active');
            }
        });
});
</script>

P.S: Ещё можно допилить в скрипт добавление класса на label
P.P.S: хотел бы увидеть решение от более опытных разрабов + готов к критике)