30.06.2017, 15:57
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
}); в конце скрипта не хватает
|
|
30.06.2017, 16:01
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
crystaltrumpet,
делайте живой пример и попробуйте увидеть здесь кнопки форматирования 
|
|
30.06.2017, 16:03
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
Сообщение от crystaltrumpet
|
вот код js, который определяет tab какого цвета будет при нажатии:
$(document).ready(function(){
var a=$(".tabflex .tab");a.click(function(){a.css("background","rgba (128,128,128, 0.5)");$(this).css("background","gray")});
|
Рони узнаешь?  |
|
30.06.2017, 16:04
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
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,075
|
|
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,127
|
|
<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,075
|
|
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");
});
|
|
|
|
