Javascript更改多个div类、选项卡式内容

我正在制作一些选项卡式内容，我将选项卡内联并稍微重叠，这意味着它们有三种状态：非活动选项卡（“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>

我只是不知道如何调用函数并将其粘贴在一起。很抱歉，这很复杂，如果无法调用下一个div/tab并单独更改其类，那么请不要担心，您能帮我更改所选的tabs类和所有其他类吗？提前谢谢

试试这个：

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

var-atags=document.getElementsByName（'tab'）//返回以tab作为名称的所有元素的数组
对于（var x=0；x，请参阅jQuery实现或普通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');
        }
    });
});

香草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);
}

var tabNest=document.getElementById（'tabNest'）；
var tabs=getElementsByClassName（'tab'）；
对于（i=0；i对于（var i=0，j=els.length；i首先，您不能重复使用id。元素id必须是唯一的。为此，请使用类。我建议始终为每个选项卡指定一个
tab
类。然后为活动标记指定一个额外的“active”类，对于后续选项卡，请使用相邻的同级选择器（
+
）.Ie，
.active+.tab

这是一个很好的使用场所。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";
    }
};

window.onload=function（）{
var tabNest=document.getElementById（“tabNest”）；
var tabs=tabNest.children；
对于（变量i=0；i
使用具有相同值的id不是最好的方法。使用
name
instead。使用jQuery是一个选项吗？使这类操作非常容易。而且，id应该是唯一的。尝试给它们一个“tab”类，您可以在class属性class=“tt tab”class=“at tab”中堆叠类.getElementByName是否调用Id？我如何将两段javascript缝合在一起形成一个函数？老实说，我不想使用javascript库。啊，谢谢你，路易斯，我一定会这样做，如果调用下一个选项卡像在值中添加1一样简单，那么调用下一个选项卡时应该会更容易。如果使用jQuery，这是一个很好的解决方案！！它确实使这类事情变得更容易。我可以使用OP想要的简单JS版本，但jQuery让DOM遍历变得轻而易举。哇，这绝对完美，非常感谢Joe，这正是我需要的。@Dan刚刚看到你关于不想使用JS库的评论，你想让我使用一个简单的JS库吗使用vanilla JS，或者jQuery可以吗？：）@Joe哦，我还没有意识到这使用了jQuery，我的意思是这取决于它会变得多么复杂，如果不麻烦的话。如果可以的话，那就太好了，如果不太麻烦的话。我真的需要阅读JS，因为当我读到它的时候，我或多或少可以理解发生了什么，但从零开始是不可能的。我会下这个赌注吗在头部？javascript部分位于
标记之间。这些标记实际上可以放在
中。@Dan S编辑我的解决方案。我没有说明如何使用循环。现在我知道了。谢谢你的帮助，我将用它来帮助我更多地理解JS（：@David-没有
文档。getElementByTagName
（单数）。我想您需要
文档.getElementsByName
，但根据属性，这对div不起作用，因为
名称
不是div的属性。那么这些div的ID是什么，只有tab1、tab2等？为什么它们需要ID？如果它们确实需要ID，请在语义上对其进行标识。例如，如果您的选项卡用于杂货，请为其指定ID“杂货店”。
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";
    }
};