JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tab_cont on">
<ul class="theater_zone screen1">
<li class="area0001">
<span class="area_zone">
<a href="javascript:void(0);" class="on">
<h4>tab1(<em>23</em>)</h4>
<div class="blind">select</div>
</a></span>
<div class="area_cont on">
<ul class="area_list d0001">
<li><a href="javascript:void(0);" class="100011013">panel1</a></li>
<li><a href="javascript:void(0);" class="100011018">panel1</a></li>
<li><a href="javascript:void(0);" class="100019010">panel1</a></li>
<li><a href="javascript:void(0);" class="100011004">panel1</a></li>
<li><a href="javascript:void(0);" class="100011009">panel1</a></li>
</ul>
</div>
</li>
<li class="area0002"><span class="area_zone">
<a href="javascript:void(0);" class="">
<h4>tab2(<em>40</em>)</h4>
</a></span>
<div class="area_cont">
<ul class="area_list d0002">
<li><a href="javascript:void(0);" class="100023015">panefgfgl2</a></li>
<li><a href="javascript:void(0);" class="100023030">panel2</a></li>
<li><a href="javascript:void(0);" class="100023027">panel2</a></li>
</ul>
</div>
</li>
</ul>
</div>
CSS
span.area_zone a.on { color:red;}
.area_list a.on { color:green;}
JavaScript
$(document).ready(function() {
$("span.area_zone a").on("click", function(event) {
event.preventDefault();
//remove tab css
$("span.area_zone a").removeClass("on");
$(this).addClass("on");
$(this).parent().parent().find('div.area_cont').addClass("on");
});
$(".area_list a").on("click", function(event) {
event.preventDefault();
//remove panel css
$(".area_list a").removeClass("on");
$(this).addClass("on");
//update the tab
$("span.area_zone a").removeClass("on");
$(this).parent().parent().parent().parent().find('span.area_zone a').addClass("on");
});
});