Question

我的页面中有3个标签的JS小代码。它们旨在帮助我在这些选项卡之间切换而无需重新加载页面。但是，这些选项卡只是一个接一个地显示并停留在那里。任何人都可以看看并告诉我问题出在哪里吗？另外，如果可能的话-在我选择了一个选项卡并尝试使用表单和PHP从一个选项卡提交数据并且验证未通过之后，我可以在此处添加一些内容，以便使同一选项卡保持活动状态并显示而不是页面，而是刷新回到第一个选项卡？即使表单已成功提交，我也希望保留在同一表单中。

这是JS部分：

function onTabClick(event) {
    let activeTabs = document.querySelectorAll('.active');
    console.log(activeTabs);
    // deactivate existing active tab and panel
    for (let i = 0; i < activeTabs.length; i++) {
        activeTabs[i].className = activeTabs[i].className.replace('active', '');
    }

    // activate new tab and panel
    event.target.parentElement.className += 'active';
    document.getElementById(event.target.href.split('#')[1]).className += 'active';
}

const elements = document.getElementsByClassName('nav-tab-element');

for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', onTabClick, false);
}

这是HTML部分。 UL元素中的选项卡以及3种形式之一。我没有全部包括在内，因此此处没有太多代码，但是它们具有正确的ID。

<ul id="nav-tab" class="nav">
            <li class="active">
                <a class="nav-tab-element" href="#books">Books</a>
            </li>
            <li>
                <a class="nav-tab-element" href="#dvds">DVD's</a>
            </li>
            <li>
                <a class="nav-tab-element" href="#furniture">Furniture</a>
            </li>
        </ul>

<!-- Tabs -->
<form action="" method="POST">
    <!-- Books Tab -->
    <div class="tab-content active" id="books">
        <div class="book-tab">

            <input type="text" name="sku" placeholder="SKU" autocomplete="off">
        </div>
        <div class="book-tab">
            <input type="text" name="name" placeholder="Name of the product" autocomplete="off">
        </div>
        <div class="book-tab">
            <input type="text" name="price" placeholder="Product price" autocomplete="off">
        </div>
        <div class="book-tab">
            <input type="text" name="size" placeholder="Weight in KG" autocomplete="off">
        </div>
        <!-- Submit Buttons -->
        <div class="btn">
            <input type="submit" value="Submit">
            <input type="reset" value="Clear">
            <input type="hidden" name="type" value="book">
        </div>
    </div>
</form>

最后，这是CSS部分：

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

我对JS非常陌生，因此将不提供任何帮助。谢谢。

Answer 1

检查您的CSS。 CSS显示元素的外观以及在某种程度上它对用户输入的反应。 JS将添加到CSS中以使网站具有交互性

我建议使用框架，因为它们可以简化许多功能。因此，您无需重新创建轮子。

我现在最喜欢的是vuejs，但是我从jQuery开始。这两个框架都基于javascript。

另一个好的框架是bootstrap，它使用CSS和jQuery来简化客户端。

在引导程序中签出 tabs ，它会为您处理所有这些功能

如果您想要使用类似方法的教程，请查看 w3schools

表格过帐 您可以使用AJAX将表单发布到任何地方，并且表单看起来好像没有发布。因此，无需更改选项卡。如果您不想使用ajax

使用循环附加eventlister添加检查以查看是否设置了窗口url属性。 this article covers this

选项卡不会切换，而是彼此堆叠。的JavaScript

1 个答案: