Показать сообщение отдельно
  #23 (permalink)  
Старый 30.06.2017, 16:05
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<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>

вроде все норм
Ответить с цитированием