Форум

crystaltrumpet · #11 (**permalink**) 30.06.2017, 14:32

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

читайте, что это за селектор и как он работает - 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 · #12 (**permalink**) 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 · #13 (**permalink**) 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 · #14 (**permalink**) 30.06.2017, 14:53

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

Rise · #15 (**permalink**) 30.06.2017, 15:08

crystaltrumpet, почему блоков три #id1, #id2, #id3, а #state один, как ты поймешь о каком блоке речь??

laimas · #16 (**permalink**) 30.06.2017, 15:08

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

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

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

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

рони · #17 (**permalink**) 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");
});

Rise · #18 (**permalink**) 30.06.2017, 15:21

crystaltrumpet, отформатируй код

MallSerg · #19 (**permalink**) 30.06.2017, 15:42

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

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

crystaltrumpet · #20 (**permalink**) 30.06.2017, 15:46

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

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

Форум

Справочник

Discord чат

Курсы javascript