Как сделать ссылки моим Tab-ам
Есть страница moysite.ru/about
Мне нужно использовать ссылку <a href""></a> для того чтобы открывался определенный Tab. В самом js по умолчанию открывается tab[1] путем добавления класса "whiteborder" Я не знаю как нужно правильно добавить #tab2 или #tab3 в адресную строку чтобы открылся второй или третий Tab Можно использовать якоря id или class которые уже есть.. Есть табы и есть JS выборка. Написал в редакторе пример: МОЙ ПРИМЕР! Я знаю что большинство из Вас опытные, подскажите новичку, Я уже прочитал и про window.location.hash.replace("#","") и про якоря.. Но вот убей не понимаю КАК ЭТО РЕАЛИЗОВАТЬ??? Буду благодарен за помощь) |
расскажите подробней что именно нужно сделать.
|
Цитата:
Мне нужно использовать ссылку <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"}... |
нужно чтобы вкладка переключалась по нажатию на ссылку, или по отслеживанию изменений в адресной строке?
|
Цитата:
|
Цитата:
то тогда можно будет делать в ссылке ...#tab2 или ...#tab3 и она будет меняться? если будет меняться тогда по отслеживанию... |
Цитата:
|
<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>
пример с таргет! |
j0hnik,
строка 27 зачем? |
Цитата:
|
Цитата:
И как тогда ссылаться на нужный таб? moySite.ru/about#id1 moySite.ru/about#id2 moySite.ru/about#id3 так? и оно будет работать? |
Цитата:
или вам подгрузка контента с других страниц нужна? если да то iframe , ajax или чем то подобным |
Цитата:
Спасибо!) поставил работает.) Если не разберусь с JS то использую Ваш Вариант. А если с JS заморочиться и сделать через якоря и проверки: window.location.hash.replace("#",""); это намного сложнее? |
нет, но css в данном случае выгодней.
|
Цитата:
если все реализовать по Вашему примеру - как тогда при нажатии на ссылку <a></a> сделать так чтобы она выделялась красным, а все остальные были серыми? Как это сделать с input понятно, а как это сделать с div в котором <a></a> вот в таком дереве: <div class="tabflex"> <div class="tab"><a href="/about#id1">Блок 1</a></div> <div class="tab"><a href="/about#id2">Блок 1</a></div> <div class="tab"><a href="/about#id3">Блок 1</a></div> </div> |
Цитата:
$('.tabflex .tab a').click(function(){
$(this).css('color', 'red').parent().siblings('.tab').children('a').css('color', 'gray');
});
айдишники уже заняты div-ами |
Цитата:
|
Цитата:
|
:write:
var a=$(".tabflex .tab a");a.click(function(){a.css("color","gray");$(this).css("color","red")});
|
Цитата:
var a=$(".tabflex .tab a");
a.click(function(){
a.css("color","gray");
$(this).css("color","red")
});
ох ты как хитро придумал :blink: |
Рони ,а сможешь в "настоящую" строку?
|
j0hnik,
так?
$(".tabflex").on("click","a",function(a){$("a",a.delegateTarget).css("color",function(){return a.target==this?"red":"gray"})});
|
а если фигурная скобка тоже = перенос строки
|
j0hnik,
пас |
Цитата:
|
j0hnik,
не понимаю вас с поста №21 |
Цитата:
при нажатии на ссылку <a></a> сделать так чтобы она выделялась красным, а все остальные были серыми? <div class="tabflex"> <div class="tab"><a href="/about#id1">Блок 1</a></div> <div class="tab"><a href="/about#id2">Блок 1</a></div> <div class="tab"><a href="/about#id3">Блок 1</a></div> </div> нужно решить задачу в одну строчку, без фигурных скобок, и точка с запятой ; допускается только в конце этой строки. |
Цитата:
|
[].forEach.call(document.querySelectorAll('.tabflex .tab a'), (el) => el.addEventListener("click", () => $(el).css('color', 'red').parent().siblings('.tab').children('a').css('color', 'gray')));
Как вам такой гибрид? ;) |
Цитата:
|
| Часовой пояс GMT +3, время: 11:54. |