Question

我正在制作一些带标签的内容，我的标签内嵌并略有重叠，这意味着它们有三种状态：非活动标签（“它”类），活动标签（“at”类）和尾随标签（“tt” “活动”选项卡后面的“类”。在下面的代码示例中，选项卡3处于活动状态，选项卡四是跟在其后面的尾随选项卡。

<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.将所有其他选项卡类更改为“it”， 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

首先，您无法重复使用ID。元素id必须是唯一的。使用类来实现。我建议总是为每个标签提供一个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";
}

Javascript更改了几个div类，标签内容

3 个答案: