javascript - 单击其选项卡时显示表格但隐藏其他表格

Question

所以现在我有一个包含 3 个选项卡的部分。每个选项卡应该显示一个不同的表，同时隐藏其他两个表。当页面加载时，它显示第一个表(它应该这样做)，但是当我单击其他两个选项卡之一时，什么也没有发生。我意识到这必须通过 Javascript onclick 来完成，但我还不熟悉它，还不知道我在做什么。不幸的是，我有很多代码用于完成这项工作，所以我无法将其发布在这里，但我会捕获我认为最重要的代码，如果您需要更多信息，请告诉我。请并感谢您的帮助。

选项卡为“路面断面编辑器”、“交通”和“状况”

HTML:

  <div class='row' style="background-color: white; vertical-align:top; height: 250px;">
                <div class="fifthDiv">
                    <br />
                    <article style="float: left; width: 100%; margin-left: 25px; height:250px;">
                        <section class="tabSection" id="tabmain">
                            <h2 class="large" style="font-size: 12px;">
                                <a href="#tabMain">Pavement Section Grid</a>
                            </h2>
                            <p><div id="table_div_Main"></div></p>
                        </section>
                        @foreach (var layer in lstLayers)
                        {
                            if (layer != "Pavement Section" && layer != "Cores" && layer != "Inventory")
                            {
                                <section id="@("tab" + layer.Replace(" ", ""))" class="tabSection">
                                    <h2 class="medium" style="font-size: 12px;"><a href="@("#tab" + layer.Replace(" ", ""))">@layer</a></h2>
                                    <p><div id="@("table_div_" + layer.Replace(" ", ""))"></div></p>
                                </section>
                            }
                        }
                    </article>
                </div>
            </div>

JavaScript:

function drawSectionData(data) {
    return drawMe(data, 'Pavement Section Data', 'table_div_Main');
};

function drawTrafficData(data) {
    return drawMe(data, 'Traffic Data', 'table_div_Traffic');
};

function drawConditionData(data) {
    return drawMe(data, 'Condition Data', 'table_div_Condition');
};

//what i got so far on the javascript
 $(".tabSection").children("h2").on('click', function() { console.log(this.closest("section")); })

Answer 1

在场景中实现选项卡的最佳方法是使用 jQuery Tabs - 非常简单，几乎不需要额外的编码，而且额外的好处是它是免费的