Javascript, изменяющий несколько классов div, содержимое с вкладками

Question

Я делаю некоторые вкладки, у меня есть вкладки, встроенные и слегка перекрывающие друг друга, что означает, что у них есть три состояния: неактивная вкладка (класс "it"), активная вкладка (класс "at") и конечная вкладка ("tt" "класс), который следует за активной вкладкой. В приведенном ниже примере кода активна вкладка 3, а вкладка 4 - конечная вкладка в том виде, в каком она идет после нее.

<div id="tabnest">
    <div id="tab" class="it"><a href="#" onclick="#">Tab One</a></div>
    <div id="tab" class="it"><a href="#" onclick="#">Tab Two</a></div>
    <div id="tab" class="at"><a href="#" onclick="#">Tab Three</a></div>
    <div id="tab" class="tt"><a href="#" onclick="#">Tab Four</a></div>
    <div id="tab" class="it"><a href="#" onclick="#">Tab Five</a></div><br>
</div>
<div id="content">
</div>

Я новичок в JavaScript. Мне бы хотелось, чтобы каждая вкладка нажималась на: 1. измените все остальные классы вкладок на «это», 2. измените текущий, выбранный класс вкладки на «at» и 3. измените класс следующих вкладок на «tt», если он существует.

Из исследований в сети я понимаю, что это те функции, которые мне нужны примерно:

document.getElementById('tab').nextSibling;
document.getElementById('tab').className = "it";

Я просто не знаю, как вызвать функцию и соединить ее вместе. Извините за сложность этого, если невозможно вызвать следующую div / tab и изменить только ее класс, то не беспокойтесь, не могли бы вы помочь мне изменить выбранный класс вкладок и все остальные, пожалуйста? Заранее спасибо.

Answer 1

См. http://jsfiddle.net/E7jnq/1/ для реализации jQuery или http://jsfiddle.net/ryMH3/ для реализации vanilla JS.

jQuery:

$(document).ready(function()
{
    $('#tabnest a').click(function()
    {
        $(this).parent().parent().find('div').removeClass('at').removeClass('tt').addClass('it'); // Set everything to 'it'
        $(this).parent().addClass('at'); // Set this div to 'at'
        if ($(this).parent().next('div').length > 0)
        {
            $(this).parent().next('div').addClass('tt');
        }
    });
});

Vanilla JS:

var tabNest = document.getElementById('tabnest');
var tabs = getElementsByClassName('tab');


for (i = 0; i < tabs.length; i++)
{
    addEventListener(tabs[i], 'click', function ()
    {
        for (i = 0; i < tabs.length; i++)
        {
            if (tabs[i] == this)
                this.className = 'tab at';
            else if (tabs[i - 1] == this)
                tabs[i].className = 'tab tt';
            else
                tabs[i].className = 'tab it';
        }
        this.className = 'tab at';

    }, false);
}

function getElementsByClassName(classname, node)
{
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))
            a.push(els[i]);
    return a;
}

function addEventListener(element, eventType, handler, capture)
{
    if (element.addEventListener)
        element.addEventListener(eventType, handler, capture);
    else if (element.attachEvent)
        element.attachEvent("on" + eventType, handler);
}

Answer 2

Во-первых, вы не можете повторно использовать идентификатор.Идентификатор элемента должен быть уникальным.Используйте класс для этого.Я бы предложил всегда присваивать каждой вкладке класс tab.Затем присвойте активному тегу дополнительный класс «активный», а для конечной вкладки используйте соседний селектор брата (+).Т.е. .active + .tab.

Это отличное место для использования jQuery .Синтаксис jQuery:

$(function() {
    $(".tab").click(function () {
        $(".tab.active").removeClass("active");
        $(this).addClass("active");
    });
});

Перетащите этот код в любой тег сценария, и он будет работать.Если вы не хотите jQuery:

window.onload = function() {
    var tabNest = document.getElementById("tabNest");
    var tabs = tabNest.children;
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].onclick = tabClick;
    }
    function tabClick (e) {
        for (var i = 0; i < tabs.length; i++) {
            tabs[i].className = tabs[i].className.replace(/\bactive\b/, "")
        }
        this.className += " active";
    }
};

Answer 3

Попробуйте это:

HTML:

<div id="tabnest">
    <div name="tab" class="it"><a href="#" onclick="#">Tab One</a></div>
    <div name="tab" class="it"><a href="#" onclick="#">Tab Two</a></div>
    <div name="tab" class="at"><a href="#" onclick="#">Tab Three</a></div>
    <div name="tab" class="tt"><a href="#" onclick="#">Tab Four</a></div>
    <div name="tab" class="it"><a href="#" onclick="#">Tab Five</a></div><br>
</div>

Javascript:

var atags = document.getElementsByName('tab'); //returns the array of all the element with tab as the name

for(var x=0; x<atags.length; x++){ // loops throught all the element with the name = tab
  // some code
  atags[x].className = "it";
}