JSFiddle - React, Tailwind, and code Playground

by Vitaliy Ivanov

HTML

<div id="main111">
		<div class="rrr">t5g4g</div>
			<div class="tabflex">
			<div class="tab">
					<a href="/about#id1">Блок 1</a>
				</div>
				<div class="tab tabi">
					<a href="/about#id2">Блок 2</a>
				</div>
				<div class="tab">
					<a href="/about#id3">Блок 3</a>
				</div>
			</div>
			<div id="id1">
				<p class="one">Текст первый122</p>
				<p class="two">Текст первый2</p>
				<p class="three">
					Первый3</p>
				</div>

				<div id="id2">
					<p class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, perspiciatis sed similique odio consequuntur nemo quis corporis qui aperiam optio adipisci, velit quaerat totam, laborum repellendus fugiat veritatis libero modi.</p>
					<p class="two">Текст второй2</p>
					<p class="three">
						Текст второй3</p>
					</div>

					<div id="id3">
						<p class="one">similique odio consequuntur nemo quis corporis qui aperiam optio adipisci, velit quaerat totam, laborum repellendus fugiat veritatis libero modi</p>
						<p class="two">Текст третий2</p>
						<p class="three">
							Текст третий3</p>
						</div>


<div id="state"> </div>
						</div>

CSS

#main111{
	width: 960px;
	margin: 10px auto 0 auto;
	background: white;
	padding: 30px;
	border: 1px solid #adaa9f;
}
.tabflex{

	display: flex;

}
.tab a {

	display: flex;
	align-items: center;
	height: 100%; 
	justify-content: center;
	text-decoration: none !important;	
}
a {
	text-decoration: none;
}
.tab {

	
	color: white;
	width: 150px;
	height: 50px;
	margin-right: 10px; 
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background: rgba(128,128,128, 0.5);

}
.tab:hover {
	animation-name: opac1;
    animation-duration: 0.5s;
	background: rgba(231,231,231, 0.9);
	color: #a35400;
}
.act {
	
	background: rgba(231,231,231, 0.9);}
}

@keyframes opac1 {
	0% {opacity: 0;}
	50% {opacity: 0.5;}
	100% {opacity: 1;}
}

@keyframes opac2 {
	0% {opacity: 1;}
	50% {opacity: 0.5;}
	100% {opacity: 0;}
}

#id1, #id2, #id3{
	padding: 10px;
	display: block;
	
}
#id1:target, #id2:target, #id3:target{
	border-color: #9c9c9c;     
	display: block;
	background: rgba(231,231,231, 0.7);
}

.rrr{
	//display: none;
	width: 100px;
	height: 100px;
	background-color: red;
	border: 1px solid red;
	margin-top: 100px;
  color: white;
}

JavaScript

$(document).ready(function(){
if ($("#main111 #id1:target").is(':hidden')) {
    $("#state").text("блок закрыт");
}
else if ($("#main111 #id1:target"").is(':visible')){
	$("#state").text("Блок все таки открыт");
  });
  <script type="text/javascript">
	$(document).ready(function(){
		var a=$(".tabflex .tab");a.click(function(){a.css("background","rgba(128,128,128, 0.5)");$(this).css("background","rgba(231,231,231, 0.7)")});

		// var persa=$("#id2");
		// if(persa.is(':hidden'))
		// 	$("#state").text("Партия содержит брак!");


		// if($(".tabflex .tab").hasClass("tab"))
		// $("#state").text("Партия содержит брак!");

		
</script>