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

30.06.2017 14:03

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

Всем привет гуру и повелителям Js и Jq
подскажите плиз почему не работает проверка по выборке :target?
Уже и документацию прочитал что есть поддержка:
http://api.jquery.com/target-selector/
А в скрипте не работает :-/

Вот задачка:
Есть вкладки таб которым присваивается
domain/name#id1
domain/name#id2
domain/name#id3
В зависимости от выбранного #id... открываются и закрываются div-ы:
#id1, #id2, #id3{
display: none;
}
#id1:target, #id2:target, #id3:target{
display: block;
}
Задача: определить какая вкладка в данный момент none, а какая block
я пробовал сделать так:
(document).ready(function(){
if ($("#main111 #id1:target").is(':hidden')) {
$("#state").text("блок закрыт");
}
else if ($("#main111 #id1:target"").is(':visible')){
$("#state").text("Блок все таки открыт");
и скрипт не работает.
Есть второй вариант:
отследить по url адресу
domain/name#id1
domain/name#id2
domain/name#id3
но я не знаю как это сделать

ksa	30.06.2017 14:12

Цитата:

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

Почему не работает?

Это больше вопрос к разработчикам...

laimas

30.06.2017 14:16

Это неверное использование селектора. Данный селектор выбирает элемент, id которого присутствует в URL, есть такой хеш.

crystaltrumpet

30.06.2017 14:20

так как же мне тогда записать? уверен вы знаете:)
Задача определить скрыт или не скрыт id1,2,3
при этом у меня в css используются:
#id1, #id2, #id3{
display: none;
}
#id1:target, #id2:target, #id3:target{
display: block;
}

ksa	30.06.2017 14:20

Цитата:

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

Это неверное использование селектора.

Селектор нормальный...

<!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'>
#t1:target {
	color: green;
}
</style>
<script type='text/javascript'>
$(function(){
	$('#t1:target').click(function(){
		alert('Ok');
	});
});
</script>
</head>
<body>
<a href='#' id='t0'>Test 0</a>
<a href='#' id='t1'>Test 1</a>
</body>
</html>

ЦСС его понимает. А вот событие не навешивается... :no:

ksa	30.06.2017 14:22

Цитата:

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

так как же мне тогда записать?

Обходись без селектора...
Бери потенциально нужный элемент... Потом проверяй чего там у тебя в хеше, потом "если да кабы". ;)

laimas

30.06.2017 14:24

Цитата:

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

Селектор нормальный

селектор то нормальный, а вот применение его есть не нормальное представление.

Если в URI domain/name#foo, и на странице есть например DIV с ID равным foo, то $('div:foo') вернет этот элемент, иначе ничего, если в URI не будет хеш.

crystaltrumpet

30.06.2017 14:26

так как же мне тогда записать? уверен вы знаете
Задача определить скрыт или не скрыт id1,2,3
при этом у меня в css используются:
#id1, #id2, #id3{
display: none;
}
#id1:target, #id2:target, #id3:target{
display: block;
}
Можно выборку сделать по хешу конечно, но я не знаю как это сделать
Как написать выражение:
Если domain/name#id1 то выполняется {}?

laimas

30.06.2017 14:29

Цитата:

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

так как же мне тогда записать?

читайте, что это за селектор и как он работает - https://api.jquery.com/target-selector/

crystaltrumpet

30.06.2017 14:32

Цитата:

Сообщение от laimas (Сообщение 457020)

читайте, что это за селектор и как он работает - https://api.jquery.com/target-selector/

это же написал с самого начала и оно НЕ РАБОТАЕТ!
я прошу мне объяснить а не перекидывать на то что я уже сам прочитал и да, я не такой умный как Вы и не понял...
все пишут одно и то же - читайте учитесь... тогда смысл форума, если я не могу ничего спросить чтобы меня не послали...
спрошу у людей, которые не "посылают":
Есть вкладки таб которым присваивается
domain/name#id1
domain/name#id2
domain/name#id3
В зависимости от выбранного #id... открываются и закрываются div-ы:
#id1, #id2, #id3{
display: none;
}
#id1:target, #id2:target, #id3:target{
display: block;
}
Задача: определить какая вкладка в данный момент none, а какая block
я пробовал сделать так:
(document).ready(function(){
if ($("#main111 #id1:target").is(':hidden')) {
$("#state").text("блок закрыт");
}
else if ($("#main111 #id1:target"").is(':visible')){
$("#state").text("Блок все таки открыт");
и скрипт не работает.
Есть второй вариант:
отследить по url адресу
domain/name#id1
domain/name#id2
domain/name#id3
но я не знаю как это сделать

ksa	30.06.2017 14:38

Цитата:

Сообщение от 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>

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

laimas

30.06.2017 14:42

Цитата:

Сообщение от 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>

crystaltrumpet

30.06.2017 14:53

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

laimas

30.06.2017 15:08

Цитата:

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

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

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

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

рони	30.06.2017 15:09

crystaltrumpet,

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

MallSerg

30.06.2017 15:42

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

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

crystaltrumpet

30.06.2017 15:46

Цитата:

Сообщение от рони (Сообщение 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
и так для каждого блока сделать проверку

j0hnik

30.06.2017 15:57

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

рони	30.06.2017 16:01

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

j0hnik

30.06.2017 16:03

Цитата:

Сообщение от 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:

рони	30.06.2017 16:04

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

j0hnik,
:)

j0hnik

30.06.2017 16:05

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

вроде все норм

j0hnik

30.06.2017 16:22

Цитата:

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

j0hnik,
:)

как ты в строчку написал, так он себе и перенес.
моя вина признаю:yes:

crystaltrumpet

30.06.2017 16:41

Все работает в мозиле, но к сожалению не работает в опере и хроме если переходишь по ссылке вида:
domain/name#id2
Пишет "все блоки закрыты"
А в мозиле работает! сразу при переходе по внешней ссылке определяет

MallSerg

30.06.2017 16:52

<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

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");

});

crystaltrumpet

30.06.2017 17:20

Цитата:

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

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?
а то при перезагрузке страницы все табы одного цвета.

рони	30.06.2017 17:44

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

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");

});

crystaltrumpet

30.06.2017 17:58

Рони, только заметил что все эти ссылки работают только если нажимаешь контрал+ ф5 ((
в общем ладно.. не буду Вас мучать.. наверно вся это затея с хешами и обновлению по отслеживанию :target полная ерунда.. это больше мой прокол, я сам поставил задачу делать условие через таргет а он работает очень глючно(
единственное как я думаю можно отследить это по url адресу
если написать условие что если переходишь по ссылке где в конце #id2 тогда выполняем подсветку tab[1]
такие еть инструменты в js ?

рони	30.06.2017 18:25

crystaltrumpet,
может убрать лишнее href="/about#id2">

Цитата:

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

такие еть инструменты в js ?

куча тем
http://javascript.ru/forum/jquery/60...o-yakoryu.html
https://javascript.ru/forum/jquery/5...tml#post393339
http://javascript.ru/forum/css-html/...-stranice.html

Часовой пояс GMT +3, время: 14:14.