Интересует вопрос, как можно реализовать функцию по клику на input с определенным ID, что бы был вывод cosnsole.log() при нажатии на первый бокс.
Например:
При нажатии на вкладку с id="Tab1" -> alert() ("Tab 1 activate"), но при нажатии на на вкладку с id="Tab2" -> alert() ("Tab 2 activate"), при этом что бы функция всегда выполнялась даже при каждом переключении вкладки. То есть функция всегда была активной, и при переключении alert каждый раз менялся в зависимости от вкладаки. Спасибо.
.ab-switcher-tabs{display:flex;width:100%;position:relative}
.ab-switcher-container{width:100%}
.ab-switcher-container:first-child{margin-right: 22px;}
.ab-switcher-input[type="radio"]{display:none}
.ab-switcher-container input[type="radio"]:checked ~ label{background:#FFF;box-shadow:none;border:2px solid #E60000;position: relative;color: #333333;}
.ab-switcher-container input[type="radio"]:checked ~ label:after {content: ""; position: absolute; top: 0; right: 0; display: block; height: 25px; width: 25px; display: block; background-size: 25px 25px; background-image: url(https://svgshare.com/i/CEK.svg); background-repeat: no-repeat;}
.ab-switcher-container input[type="radio"] ~ .tab-content{display:none}
.ab-switcher-container input[type="radio"]:checked ~ .tab-content{display:block}
.ab-switcher-container label{height: 50px;white-space: nowrap;transition:.1s;display:block;cursor:pointer;border:2px solid #CCC;padding:15px; color: #999999; font-family: "Vodafone Rg"; font-size: 18px; font-weight: bold; line-height: 18px; text-align: center;}
.ab-switcher-container .tab-content{background:#dda0dd;position:absolute;left:0;width:calc(100% - 2em);padding:1em}
input#tab1,input#tab2{display:none}
<div class="ab-element">
<div class="ab-switcher-tabs">
<div class="ab-switcher-container">
<input type="radio" class="ab-radio" value="1" id="tab1" name="input[1][]" checked="">
<label for="tab1" class="tab">Checkbox 1</label>
</div>
<div class="ab-switcher-container">
<input type="radio" class="ab-radio" value="2" id="tab2" name="input[1][]">
<label for="tab2" class="tab">Checkbox 2</label>
</div>
</div>
</div>