javascript - jQuery - 显示一个 DIV 并隐藏多个其他

Question

我正在处理页面加载事件，一个 DIV 将是 display:block，另外两个被设置为 display:none。

一旦用户单击按钮查看其中一个隐藏的 DIV，样式将切换，因此隐藏的 DIV 将被设置为 display:block，另一个将是 display: none 。

我目前正在处理这个问题，但我想看看是否有更有效的方法来解决这个问题。

Working Fiddle :

New fiddle... :

如有任何建议，我们将不胜感激!

Answer 1

1. 将 Common Class 添加到所有选项卡标题
2. 添加 data-target 属性以在点击 tab-header 时显示元素
3. 将容器内的所有选项卡内容分组

查看 HTML 中突出显示的更改和 Javascript 中的内联注释。

HTML:

<div class="pageTabs">
    <div class="tabs">
        <span id="overview-btn" class="active tabHeader" data-target="#overview-section">Overview</span>
        //                                    ^^^^^^^^^  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        <span id="itinerary-btn" class="tabHeader" data-target="#itinerary-section">Full Itinerary</span>
        //                       ^^^^^^^^^^^^^^^^  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        <span id="map-btn" class="tabHeader" data-target="#map-section">Map</span>
        //                 ^^^^^^^^^^^^^^^^  ^^^^^^^^^^^^^^^^^^^^^^^^^^
    </div>
</div>
<div class="content">
    <div class="overview" id="overview-section">
        <p>Intro 1</p>
        <p>Intro 2</p>
        <p>Intro 3</p>
    </div>
    <div class="itinerary" id="itinerary-section">
        <div class="heading">Day 1</div>
        <p>blah blah blah</p>
        <hr>
        <div class="heading">Day 2</div>
        <p>blah blah blah</p>
        <hr>
        <div class="heading">Day 3</div>
        <p>blah blah blah</p>
        <hr>
        <div class="heading">Day 4</div>
        <p>blah blah blah</p>
        <hr>
        <div class="heading">Day 5</div>
        <p>blah blah blah</p>
        <hr>
    </div>
    <div class="map" id="map-section">map here...</div>
</div>

Javascript:

$(document).ready(function () {
    // When tab-header is clicked
    $('.tabHeader').on('click', function () {

        // Add active class to the clicked element, and remove from other tab-headings
        $(this).addClass('active').siblings().removeClass('active');

        // Get the target element show it and hide other tab-contents
        $($(this).data('target')).show().siblings().hide();
    });
});

演示:https://jsfiddle.net/tusharj/p9bnq8dp/2/