Question

所以现在我有一个部分，上面有3个标签。每个选项卡都应该显示不同的表，同时隐藏其他2个表。当页面加载时，它显示第一个表（它应该这样做），但是当我单击其他两个选项卡中的一个时，没有任何反应。我意识到这必须通过Javascript onclick来完成，但我还不熟悉它还没知道我在做什么。我很遗憾有很多代码可以用来做这个工作，所以我不能在这里发布但是生病了我觉得最重要的代码，如果你需要更多的信息让我知道。请和谢谢你的帮助。

标签是“Pavement Section Editor”，“Traffic”和“Condition”

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 - 非常简单，几乎不需要额外的编码，并且添加benfit是免费的

Answer 2

基于以下假设：

您只想隐藏位于每个p内的内容部分而不是隐藏整个section本身，因为那会意味着您的可点击h2也会变得不可见。
您已从div中删除section，并且仅使用p 因为inline元素不允许包含block（在您的 case中有一个div）元素。 [Link]，[Link]＆amp; [Link]。

您的JavaScript代码可能如下所示：

var tabSections=$('.tabSection'); // select all .tabSection elements
tabSections.not('#tabmain').find('p').hide(); // hide all p elements found within tabSections stored above excluding #tabmain
    tabSections.find('h2').on('click',function(){ // assign clicks to all h2 elements found within tabSections
        tabSections.find('p').hide(); // hide all p elements found within tabSections
        $(this).siblings('p').show(); // show the p element which is a sibling to the clicked h2 element
    });

<强> 段：

＆＃13;

var tabSections=$('.tabSection');
tabSections.not('#tabmain').find('p').hide();
tabSections.find('h2').on('click',function(){
    tabSections.find('p').hide();
    $(this).siblings('p').show();
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<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">Main</a>
                </h2>
                <p id="table_div_Main">Pavement Data</p>
            </section>
            <section class="tabSection" id="tabTraffic">
                 <h2 class="medium" style="font-size: 12px;">
                    <a href="#tabTraffic">Traffic</a>
                </h2>
                <p id="table_div_Traffic">Traffic Data</p>
            </section>
            <section class="tabSection" id="tabCondition">
                 <h2 class="medium" style="font-size: 12px;">
                    <a href="#tabCondition">Condition</a>
                </h2>
                <p id="table_div_Condition">Condition Data</p>
            </section>
        </article>
    </div>
</div>

＆＃13;

希望这有帮助。

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

2 个答案: