<head>
<meta charset="utf-8">
<style>
#id1, #id2, #id3{
display: none;
}
#id1:target, #id2:target, #id3:target{
display: block;
}
</style>
</head>
<body>
<div id="main111">
<div class="tabflex">
<div class="tab"><a href="#id1">Блок 1</a></div>
<div class="tab tabi"><a href="#id2">Блок 2</a></div>
<div class="tab"><a href="#id3">Блок 3</a></div>
</div>
<div id="id1">Текст первой закладки</div>
<div id="id2">Текст первой закладки</div>
<div id="id3">Текст первой закладки</div>
</div>
<div id="state">В данный момент открыт блок: </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var a=$(".tabflex .tab");
a.click(function(){
a.css("background","rgba (128,128,128, 0.5)");
$(this).css("background","gray");
});
$(function(){function out()
{
var elem = $(":target"), str = "все блоки закрыты";
if(elem.length) str = "блок " + elem[0].id + " открыт";
$("#state").text(str);
}
$(window).on("hashchange", out).trigger("hashchange");
});
</script>
</body>
вроде все норм