Как сделать, чтобы при активации второго чекбокса снимался первый и пропадал контент первой вкладки?
Можно было бы оформить вместо checkbox
, например, radio
, но ситуация требует именно такого checkbox
.
jQuery(document).ready(function($) {
const checkbox2tabMap = {
link01: 'tab1',
link02: 'tab2',
link03: 'tab3',
};
function onCheckboxChange(event) {
const tab = document.getElementById(checkbox2tabMap[event.target.id]);
if(!tab) { return; }
tab.style.display = event.target.checked ? 'block' : 'none';
}
Object.keys(checkbox2tabMap).forEach((id) =>{
let check = document.getElementById(id);
if(check) check.addEventListener('change', onCheckboxChange)
});
});
label {display: block;}
.link {
width: 100px; display: inline-block;
text-align: center; padding: 3px 0;
background-color: #ddd; user-select: none;
border: 1px solid #333; cursor: pointer;
}
.tab {
width: 400px; height: 50px; margin: 5px 24px;
background-color: #666; color: #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="divider">
<input id="link01" class="linkinp form-check-input" name="link" type="checkbox">
<label for="link01" class="link">Вкладка 1</label>
</div><br>
<div class="divider">
<input id="link02" class="linkinp form-check-input" name="link" type="checkbox">
<label for="link02" class="link">Вкладка 2</label>
</div><br>
<div class="divider">
<input id="link03" class="linkinp form-check-input" name="link" type="checkbox">
<label for="link03" class="link">Вкладка 3</label>
</div><br>
<div id="tab1" class="tab2" style="display: none;">Контент вкладки 1</div>
<div id="tab2" class="tab2" style="display: none;">Контент вкладки 2</div>
<div id="tab3" class="tab2" style="display: none;">Контент вкладки 3</div>