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

I am working on page load event, one DIV will be display:block and two others are set to display:none.

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

Once the user clicks a button to view one of the hidden DIV's the style will switch so the hidden DIV will then be set to display:block and the other will be display: none.

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

I have this working currently, but I was looking to see if there was a more efficient way of approaching this.

我现在有这个工作,但我想看看是否有更有效的方法来解决这个问题。

Working Fiddle:

New fiddle...:

Any suggestions would be appreciated!

任何建议,将不胜感激!

4 个解决方案

#1

1. Add Common Class to all the tab headers

将Common Class添加到所有选项卡标题

2. Add data-target attribute to show the element when clicked on tab-header

添加data-target属性以在tab-header上单击时显示该元素

3. Group all the tab-contents inside on container

将容器内的所有选项卡内容分组

See the changes highlighted in HTML and inline comments in Javascript.

查看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();
    });
});

Demo: https://jsfiddle.net/tusharj/p9bnq8dp/2/

#2

Put all your css changes in classes in a css file and use .addClass('yourclass') in your Jquery script (don't forget to load the css file).

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

for .css("display", "none") use Jquery .hide() with/without .toggle()

for .css(“display”,“none”)使用带有/不带.toggle()的Jquery .hide()

#3

Added class tab to all the individual tabs.

为所有单个选项卡添加了类选项卡。

Note:Changed them from span to button since they are clickable elements and would get keyboard focus this way.

注意:将它们从span更改为按钮,因为它们是可单击的元素,并且可以通过这种方式获得键盘焦点。

Also added a data attribute which contains the id of the corresponding content section.

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

Added a class content-section to each 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>

Added the following jquery code:

添加了以下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/

#4

You should the following inorder to optimize your code.

您应该以下内容以优化您的代码。

1. Should rename the "overview-btn" to "overview"

应将“overview-btn”重命名为“overview”

2. Should rename the "itinerary-btn" to "itinerary"

应该将“itinerary-btn”重命名为“行程”

3. Should rename the "map-btn" to "map"

应该将“map-btn”重命名为“map”

Then use the following code

然后使用以下代码

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>

Please let me know , if this solves your problem

如果这解决了您的问题,请告诉我