Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как сделать ссылки моим Tab-ам (https://javascript.ru/forum/events/69494-kak-sdelat-ssylki-moim-tab-am.html)

crystaltrumpet 28.06.2017 12:17

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

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



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

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

j0hnik 28.06.2017 15:40

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

crystaltrumpet 28.06.2017 15:48

Цитата:

Сообщение от j0hnik (Сообщение 456785)
расскажите подробней что именно нужно сделать.

Есть страница 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 28.06.2017 16:34

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

MallSerg 28.06.2017 16:40

Цитата:

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

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

crystaltrumpet 28.06.2017 17:03

Цитата:

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

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

j0hnik 28.06.2017 17:23

Цитата:

Сообщение от MallSerg (Сообщение 456788)
Проще всего и так и так и без JS через css псевдокласс target

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

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


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

рони 28.06.2017 17:49

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

j0hnik 28.06.2017 18:01

Цитата:

Сообщение от рони (Сообщение 456792)
j0hnik,
строка 27 зачем?

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


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