Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.01.2015, 05:19
Аспирант
Отправить личное сообщение для CraftLawrence Посмотреть профиль Найти все сообщения от CraftLawrence
 
Регистрация: 22.11.2014
Сообщений: 44

По клику на кнопку менять контент сайта сразу в двух местах
Уже 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>
Ответить с цитированием
  #2 (permalink)  
Старый 06.01.2015, 05:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

CraftLawrence,
берёте индекс li -- затем в блоке tab-content показываите div с такимже индексом и в блоке форм тоже
Ответить с цитированием
  #3 (permalink)  
Старый 07.01.2015, 01:22
Аспирант
Отправить личное сообщение для CraftLawrence Посмотреть профиль Найти все сообщения от CraftLawrence
 
Регистрация: 22.11.2014
Сообщений: 44

Сообщение от рони Посмотреть сообщение
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, 07.01.2015 в 02:56.
Ответить с цитированием
  #4 (permalink)  
Старый 07.01.2015, 07:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

CraftLawrence,
открывашка по индексу ...
<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как по клику на кнопку получить отмеченный объект pirat9629 ExtJS 0 19.08.2014 11:49
background resize IceDvl jQuery 4 25.04.2014 17:54
Перемещение блока при скроллинге region029 Общие вопросы Javascript 10 16.06.2012 10:41