Javascript-форум - проверка css :target в jquery Почему не работает?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - проверка css :target в jquery Почему не работает? (https://javascript.ru/forum/dom-window/69525-proverka-css-target-v-jquery-pochemu-ne-rabotaet.html)

Цитата:

Сообщение от crystaltrumpet

Задача определить скрыт или не скрыт id1

Дюже хитрожопый селектор... Не определяется "стандартными" методами.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#t0 {
	display: none;
}
#t1:target {
	display: none;
}
</style>
<script type='text/javascript'>
$(function(){
	alert('#t0 visible - '+$('#t0').is(":visible"));
	alert('#t0 hidden - '+$('#t0').is(":hidden"));
	alert('#t1 visible - '+$('#t1').is(":visible"));
	alert('#t1 hidden - '+$('#t1').is(":hidden"));
});
</script>
</head>
<body>
<a href='#' id='t0'>Test 0</a>
<a href='#' id='t1'>Test 1</a>
</body>
</html>

Придется хеш смотреть и делать выводы. :(

Цитата:

Сообщение от crystaltrumpet

оно НЕ РАБОТАЕТ

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
    $('button').click(function() {
        location.href += '#as';
        alert($('p:target').text())
    })
});
</script>
</head>
<body>
<button>GO</button>
<p id="as">Text</p>
</body>
</html>

Вы присваиваете сам хеш:
location.href += '#as';
а у меня он уже присвоен и нужно его использовать в условии, в выборке
определить какие tab none или display То есть когда уже target состоялся по факту
и тут засада(((

Цитата:

Сообщение от crystaltrumpet

Вы присваиваете сам хеш:
location.href += '#as';
а у меня он уже присвоен

Оригинально. Как я могу задать в примере хеш? Не выдумывайте причины, как разница есть он или добавлен. Сначала добавляется и элемент получен? Да. А если опять щелкнуть GO, будет получен? Нет. А почему?

Так как вы используете это селектор, это можно назвать глупостью, не иначе.

crystaltrumpet,

$(function(){function out()
{
  var elem = $(":target"), str = "все блоки закрыты";
  if(elem.length) str = "блок " + elem[0].id + " открыт";
  $("#state").text(str)
}
$(window).on("hashchange", out).trigger("hashchange");
});

ГОдно вбросил аж в нескольких темах забурлило =).
Хотя вопрос интересный для мнений и обсуждения.

А что если id вешать в ссылку
<a href="#tab1" id="tab1"></a>
а контент вкладки отображать через селектор соседних элементов
a#tab1:target + div#contentTab1 { display:block }

Цитата:

Сообщение от рони (Сообщение 457034)

crystaltrumpet,

$(function(){function out()
{
  var elem = $(":target"), str = "все блоки закрыты";
  if(elem.length) str = "блок " + elem[0].id + " открыт";
  $("#state").text(str)
}
$(window).on("hashchange", out).trigger("hashchange");
});

Рони, спасибо что ответили - но у меня при перезагрузке страницы показывает "все блоки закрыты", хотя открыт id1
давайте я нарисую полную структуру:
<div id="main111">
<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">Текст первой закладки</div>
<div id="id2">Текст второйзакладки</div>
<div id="id3">Текст третьей закладки</div>
</div>
<div id="state">В данный момент открыт блок: </div>

Вот css:
#id1, #id2, #id3{
display: none;
}
#id1:target, #id2:target, #id3:target{
display: block;
}
вот код 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")});

При перезагрузке страницы допустим domain/name#id2
Ваш скрипт пишет "все страницы закрыты" хотя загружается #id2
если я нажимаю на любой из выбранных тогда да! показывается какой именно открыт блок, но мне нужно чтобы когда люди переходили по внешней ссылке на domain/name#id2 чтобы показывало в div id="state" что в данный момент открыт div #id2

Как я думал сделать:
для каждого id прописать условие
Что если #id2:target == style display block тогда выводится текст - что открыт именно блок id2
и так для каждого блока сделать проверку

}); в конце скрипта не хватает

crystaltrumpet,
делайте живой пример и попробуйте увидеть здесь кнопки форматирования

Цитата:

Сообщение от crystaltrumpet (Сообщение 457042)

вот код 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")});

Рони узнаешь?:yes: