можно обернуть 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: хотел бы увидеть решение от более опытных разрабов + готов к критике)