JSFiddle - React, Tailwind, and code Playground

by noys noys

HTML

<div id="wrap">
    <div id="tabs">
        <ul>
            <li class="current">first</li>
            <li>second</li>
            <li>third</li>
            <li>forth</li>
        </ul>
        <div style="clear: both"></div>
    </div>
    <div id="boxes">
        <div class="box visible">first
            <input type="checkbox" name="11" value="11" checked="checked" />
            <input type="checkbox" name="12" value="12" />
            <input type="checkbox" name="13" value="13" />
        </div>
        <div class="box">second
            <input type="checkbox" name="21" value="21" />
            <input type="checkbox" name="22" value="22" />
            <input type="checkbox" name="23" value="23" />
        </div>
        <div class="box">third
            <input type="checkbox" name="31" value="31" checked="checked" />
            <input type="checkbox" name="32" value="32" />
            <input type="checkbox" name="33" value="33" />
        </div>
        <div class="box">forth
            <input type="checkbox" name="41" value="41" />
            <input type="checkbox" name="42" value="42" />
            <input type="checkbox" name="43" value="43" />
        </div>
    </div>
</div>

CSS

#tabs ul {
	list-style: none;
    overflow: auto;
    margin: 0;
    padding: 0;
}
#tabs ul li {
	float: left;
	background: #6E6B76;
	padding: 5px 20px;
	color: #AAA;
	font-size: 13px;
	cursor: pointer;
}

#tabs ul li:hover {
    color: #CCC;
    background: #787680;
}

#tabs ul li.current {
	color: #CCC;
	background: #7E7B86;
}

#tabs ul li.havechecked {
	color: #FF7B86;
}

#boxes .box {
	display: none;
	padding: 10px;
	margin-bottom: 10px;
    background: #7E7B86;
}

#boxes .box.visible {
	display: block;
}

JavaScript

$('#tabs').each(function() {
	$(this).find('li').each(function(i) {
		$(this).click(function(){
$(this).addClass('current').siblings().removeClass('current').parents('#wrap').find('.box').eq($(this).index()).addClass('visible').siblings('.box').removeClass('visible');
		});
	});
});

$(':checkbox:checked').each(function(){
	$('#tabs li').eq($(this).parent().index()).addClass('havechecked');
})

$('.box :checkbox').click(function(){
    var tab = $('#tabs li').eq($(this).parent().index());
    $(tab).removeClass('havechecked');
    $(this).parent().find(':checkbox').each(function(){
        if($(this).is(':checked')) {
            $(tab).addClass('havechecked');
        }
    });
});