30.06.2017, 16:04
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
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");
});
|
|
30.06.2017, 16:05
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
j0hnik,
|
|
30.06.2017, 16:05
|
 |
Профессор
|
|
Регистрация: 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>
вроде все норм
|
|
30.06.2017, 16:22
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
Сообщение от рони
|
j0hnik,
|
как ты в строчку написал, так он себе и перенес.
моя вина признаю  |
|
30.06.2017, 16:41
|
|
Аспирант
|
|
Регистрация: 28.06.2017
Сообщений: 42
|
|
|
Все работает в мозиле, но к сожалению не работает в опере и хроме если переходишь по ссылке вида:
domain/name#id2
Пишет "все блоки закрыты"
А в мозиле работает! сразу при переходе по внешней ссылке определяет
|
|
30.06.2017, 16:52
|
 |
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,138
|
|
<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 ? |
|
30.06.2017, 16:57
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
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");
});
|
|
30.06.2017, 17:20
|
|
Аспирант
|
|
Регистрация: 28.06.2017
Сообщений: 42
|
|
|
Сообщение от рони
|
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, 30.06.2017 в 17:27.
|
|
30.06.2017, 17:44
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
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");
};
|
|
30.06.2017, 17:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
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");
});
|
|
|
|
