По клику на кнопку менять контент сайта сразу в двух местах
Уже 5ый час ищу решение, может вы подскажете.
Делаю что-то вроде самых обыкновенных табов (пример). И это собственно получилось без проблем, пока не стала задача вместе с выбором таба чтобы далеко внизу странички менялась форма в зависимости от выбранного таба. Вот пример кода, с помощью которого были реализованы обычные табы. Но я не могу использовать id="tab1" еще и внизу для форм. Перекопал кучу гулостраничек - везде сухо. Подскажите хотя бы в какой стороне смотреть? JS:
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
HTML:
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Tab #1</a></li>
<li><a href="#tab2">Tab #2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">Контент 1</div>
<div id="tab2" class="tab">Контент 2</div>
</div>
</div>
|
CraftLawrence,
берёте индекс li -- затем в блоке tab-content показываите div с такимже индексом и в блоке форм тоже |
Цитата:
Может кому пригодится, кто нагуглит этот топик в будущем. Скрипт кривоват, но работает) Кнопка-запускатор скрипта:
<a id="button1" href="#" id="toggler1" onclick="toggle1('form1', this);">Активатор</a>
Блоки, который мы меняем друг вместо друга (код такой же и для второй пары блоков "changer"): <div id="form1" style="display: block;"> Контент 1 </div> <div id="form2" style="display: none;"> Контент 2 </div> Скрипт:
function toggle1(id, link)
{
openbox1(id, link);
return false;
}
function openbox1(id, toggler1)
{
var form11 = document.getElementById('form1');
var form22 = document.getElementById('form2');
var changer11 = document.getElementById('changer1');
var changer22 = document.getElementById('changer2');
form11.style.display = 'block';
form22.style.display = 'none';
changer11.style.display = 'block';
changer22.style.display = 'none';
}
|
CraftLawrence,
:write: открывашка по индексу ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.tab-links li.active, .tab-content div.active, .tab-form div.active{
display: block;
background: rgb(51, 255, 102)
}
.tab-content div, .tab-form div {
display: none;
}
</style>
</head>
<body>
<ul class="tab-links">
<li class="active"><a href="#tab1">Tab #1</a></li>
<li><a href="#tab2">Tab #2</a></li>
<li><a href="#tab3">Tab #3</a></li>
<li><a href="#tab4">Tab #4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">Контент 1</div>
<div id="tab2" class="tab">Контент 2</div>
<div id="tab3" class="tab">Контент 3</div>
<div id="tab4" class="tab">Контент 4</div>
</div>
<div class="tab-form">
<div id="form1" class="tab active">Форм 1</div>
<div id="form2" class="tab">Форм 2</div>
<div id="form3" class="tab">Форм 3</div>
<div id="form4" class="tab">Форм 4</div>
</div>
<script>
var elems = [document.querySelectorAll(".tab-links li"),
document.querySelectorAll(".tab-content div"),
document.querySelectorAll(".tab-form div")];
[].forEach.call(elems[0], function(el, indx) {
el.onclick = function() {
var active = document.querySelectorAll(".active");
for (var i = 0; i < active.length; i++) {
active[i].classList.remove("active");
elems[i][indx].classList.add("active")
}
return false
}
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 09:50. |