Форум

crystaltrumpet · #1 (**permalink**) 28.06.2017, 12:17

Есть страница moysite.ru/about
Мне нужно использовать ссылку <a href""></a> для того чтобы открывался определенный Tab.

В самом js по умолчанию открывается tab[1] путем добавления класса "whiteborder"
Я не знаю как нужно правильно добавить #tab2 или #tab3 в адресную строку чтобы открылся второй или третий Tab
Можно использовать якоря id или class которые уже есть..

Есть табы и есть JS выборка.
Написал в редакторе пример: МОЙ ПРИМЕР!

Я знаю что большинство из Вас опытные, подскажите новичку, Я уже прочитал и про window.location.hash.replace("#","")
и про якоря.. Но вот убей не понимаю КАК ЭТО РЕАЛИЗОВАТЬ???
Буду благодарен за помощь)

j0hnik · #2 (**permalink**) 28.06.2017, 15:40

расскажите подробней что именно нужно сделать.

crystaltrumpet · #3 (**permalink**) 28.06.2017, 15:48

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

расскажите подробней что именно нужно сделать.

Есть страница moysite.ru/about
Мне нужно использовать ссылку <a href""></a> для того чтобы открывался определенный Tab.

В самом js по умолчанию открывается tab[1] путем добавления класса "whiteborder"
Я не знаю как нужно правильно добавить #tab2 или #tab3 в адресную строку чтобы открылся второй или третий Tab
Можно использовать якоря id или class которые уже есть..
Может как то так:
$(document).ready(function(){
$('a[href^="/about#"').click(function(){
var loc = window.location.hash.replace("#","");
if (loc == "") {loc = "tab2"}...

j0hnik · #4 (**permalink**) 28.06.2017, 16:34

нужно чтобы вкладка переключалась по нажатию на ссылку, или по отслеживанию изменений в адресной строке?

MallSerg · #5 (**permalink**) 28.06.2017, 16:40

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

нужно чтобы вкладка переключалась по нажатию на ссылку, или по отслеживанию изменений в адресной строке?

Проще всего и так и так и без JS через css псевдокласс target

crystaltrumpet · #6 (**permalink**) 28.06.2017, 17:03

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

нужно чтобы вкладка переключалась по нажатию на ссылку, или по отслеживанию изменений в адресной строке?

Но ведь если сделать по отслеживанию изменений в адресной строке, то
то тогда можно будет делать в ссылке ...#tab2 или ...#tab3 и она будет меняться?
если будет меняться тогда по отслеживанию...

j0hnik · #7 (**permalink**) 28.06.2017, 17:23

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

Проще всего и так и так и без JS через css псевдокласс target

Таргет нажатия клавиш не отслеживает к сожалению

j0hnik · #8 (**permalink**) 28.06.2017, 17:37

<html>
<head>
	<style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 960px;
            margin: 10px auto 0 auto;
            background: white;
            padding: 30px;
            border: 1px solid #adaa9f;
        }
        ul, div{
            margin-bottom: 10px;
        }     
        .main>div{
            padding: 10px;
            border: 1px solid #eaeaea;
            display: none;
        }
        .main div:target{
            display: block; 
        }
	</style>
</head>
<body>
	<div class="main">
		<ul>
			<li><a href="#id1">Блок 1</a></li>
			<li><a href="#id2">Блок 2</a></li>
			<li><a href="#id3">Блок 3</a></li>
			<li><a href="#id4">Блок 4</a></li>
		</ul>
		<div id="id1">Текст 1</div>		
		<div id="id2">Текст 2</div>		
		<div id="id3">Текст 3</div>		
		<div id="id4">Текст 4</div>
	</div>
</body>
</html>

пример с таргет!

рони · #9 (**permalink**) 28.06.2017, 17:49

j0hnik,
строка 27 зачем?

j0hnik · #10 (**permalink**) 28.06.2017, 18:01

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

j0hnik,
строка 27 зачем?

Спасибо, верно заметили, была не нужна, стер!

Форум

Справочник

Discord чат

Курсы javascript