jQuery-显示一个DIV，隐藏多个DIV

Question

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

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

我目前正在工作，但是我正在寻找是否有更有效的方法来解决这个问题。

工作小提琴 ：

新提琴... ：

任何建议，将不胜感激！

Answer 1

1. 将通用类添加到所有选项卡标题
2. 添加data-target属性以在单击选项卡标题时显示元素
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/

Answer 2

将所有css更改放入一个css文件中的类中，并在Jquery脚本中使用.addClass('yourclass') （请不要忘记加载css文件）。

为的CSS（ “显示”， “无”）使用jQuery .hide()有/无.toggle()

Answer 3

在所有单个标签中添加了“类别”标签。

注意：将它们从跨度更改为按钮，因为它们是可单击元素，并且将以这种方式获得键盘焦点。

还添加了一个数据属性，其中包含相应内容部分的ID。

向每个内容部分添加了一个类content-section。

<div class="pageTabs">
    <div class="tabs">
        <button id="overview-btn" class="active tab" data-content="overview-section">Overview</button>
        <button id="itinerary-btn" class="tab" data-content="itinerary-section">Full Itinerary</button>
        <button id="map-btn" class="tab" data-content="map-section">Map</button>
    </div>
</div>

<div class="content">
    <div class="overview content-section selected" id="overview-section">
        <p>Intro 1</p>
        <p>Intro 2</p>
        <p>Intro 3</p>

    </div>


    <div class="itinerary content-section" 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 content-section" id="map-section">

        map here...

     </div>
</div>

添加了以下jQuery代码：

jQuery(document).ready(function(){
    $('.tab').on('click',function() {
        var $this = $(this);
        var selectedContentId = '#' + $this.data('content');
        $('.tab').removeClass('active');
        $this.addClass('active');
        $('.content-section').removeClass('selected');
        $(selectedContentId).addClass('selected');
    });
});

https://jsfiddle.net/p9bnq8dp/8/

Answer 4

您应该按照以下顺序优化代码。

1. 应将“ overview-btn ”重命名为“ overview ”
2. 应该将“ initerary-btn ”重命名为“ initerary ”
3. 应将“ map-btn ”重命名为“ map ”

然后使用以下代码

 jQuery(document).ready(function(){ jQuery('.tabs span').click(function(){ //First remove the class 'active' from the .tabs of all spans jQuery('.tabs span').removeClass('active'); // We will make only the clicked one active (color pink) jQuery(this).addClass('active'); //hide all the .overview class jQuery('.overview').hide(); //then only the clicked tabs "id"-section jQuery('#'+jQuery(this).attr('id')+"-section").show(); }); //initial setting jQuery('.overview').hide(); jQuery('#overview-section').show(); }); 

 .pageTabs .tabs span {background-color: #797979; color: #fff!important; cursor: pointer; display: inline-block; font-size: 12px; line-height: 30px; margin: 0!important; padding: 0 12px; text-decoration: none;} .active {background-color: #e10981!important;} .content {margin: 10px 0 0 0;} .overview {display: block;} .overview .itineraryTable {width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; width: 100%; background-color: #58595b; color: #58595b;} .overview .itineraryTable .titleRow {background-color: #e10981!important; border: 1px solid #e10981!important; color: #fff; font-size: 14px; padding: 4px; text-align: left;} .overview .itineraryTable th {color: inherit; background-color: #fff; width: 15%; border: 1px solid #bcbec0; text-align: left; padding: 4px;} .overview .itineraryTable td {border: 1px solid #bcbec0; background-color: #fff; color: #797979; padding: 4px; width: 95%;} .itinerary {display: none;} .itinerary .heading {color: #e10981!important; font-size: 14px; line-height: 14px;} .itinerary p {color: #797979; font-size: 12px; line-height: 16px; margin: 10px 0; text-align: justify;} .itinerary hr {background-color: #bcbec0; border: medium none; height: 1px; margin: 15px 0;} .map {display: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="pageTabs"> <div class="tabs"> <span id="overview" class="active">Overview</span> <span id="itinerary">Full Itinerary</span> <span id="map">Map</span> </div> </div> <div class="content"> <div class="overview" id="overview-section" style="display:block;"> <p>Intro 1</p> <p>Intro 2</p> <p>Intro 3</p> </div> </div> <div class="overview" 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="overview" id="map-section"> map here... </div> 

如果可以解决您的问题，请告诉我