crystaltrumpet,
сделайте так ...
$(function() {
var a=$(".tabflex .tab");a.click(function(){a.css("background","rgba (128,128,128, 0.5)");$(this).css("background","gray")});
function out()
{
var elem = $(":target"), str = "все блоки закрыты";
if(elem.length) str = "блок " + elem[0].id + " открыт";
$("#state").text(str)
}
$(window).on("hashchange", out).trigger("hashchange");
});
|
j0hnik,
:) |
<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>
вроде все норм |
Цитата:
моя вина признаю:yes: |
Все работает в мозиле, но к сожалению не работает в опере и хроме если переходишь по ссылке вида:
domain/name#id2 Пишет "все блоки закрыты" А в мозиле работает! сразу при переходе по внешней ссылке определяет |
<head>
<meta charset="utf-8">
<style>
.tab > a:target {color:red;}
.tab > a ~ div{display:none;}
.tab > a:target:nth-child(1) ~ div:nth-child(4) {display:block;}
.tab > a:target:nth-child(2) ~ div:nth-child(5) {display:block;}
.tab > a:target:nth-child(3) ~ div:nth-child(6) {display:block;}
</style>
</head>
<div class="tab">
<a href="#tab01" id="tab01">таб 1</a>
<a href="#tab02" id="tab02">таб 2</a>
<a href="#tab03" id="tab03">таб 3</a>
<div>Текст первой закладки</div>
<div>Текст второй закладки</div>
<div>Текст третьей закладки</div>
</div>
</body>
Непонятно все эти танцы вокруг jQuery. Почему просто не проверить отображается блок или нет через getComputedStyle ? |
crystaltrumpet,
может так сработает
$(window).on("load", function() {
var a = $(".tabflex .tab");
a.click(function() {
a.css("background", "rgba (128,128,128, 0.5)");
$(this).css("background", "gray")
});
function out() {
var elem = $(":target"),
str = "все блоки закрыты";
if (elem.length) str = "блок " + elem[0].id + " открыт";
$("#state").text(str)
}
$(window).on("hashchange", out).trigger("hashchange");
});
|
Цитата:
Огромное спасибо и респект! Последний вопрос: а можно с помощью этого выражения, что вы написали при загрузке страницы чтобы подвсечивался нужный tab? а то при перезагрузке страницы все табы одного цвета. |
crystaltrumpet,
строка 11
if(elem.length) {
var id = elem[0].id;
str = "блок " + id + " открыт";
id = {"id1" : 0, "id2" : 1, "id3" : 2}[id];
a.eq(id).css("background","gray");
};
|
crystaltrumpet,
должно так работать
$(window).on("load", function() {
var a=$(".tabflex .tab");
function out()
{
var elem = $(":target"), str = "все блоки закрыты";
if(elem.length) {
var id = elem[0].id;
str = "блок " + id + " открыт";
id = {"id1" : 0, "id2" : 1, "id3" : 2}[id];
a.css("background","rgba (128,128,128, 0.5)");
a.eq(id).css("background","gray");
}
$("#state").text(str)
}
$(window).on("hashchange", out).trigger("hashchange");
});
|
| Часовой пояс GMT +3, время: 12:53. |