Форум

CraftLawrence · #1 (**permalink**) 06.01.2015, 05:19

Уже 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

CraftLawrence,
берёте индекс li -- затем в блоке tab-content показываите div с такимже индексом и в блоке форм тоже

CraftLawrence · #3 (**permalink**) 07.01.2015, 01:22

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

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';
	}

рони · #4 (**permalink**) 07.01.2015, 07:36

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>

Форум

Справочник

Discord чат

Курсы javascript