Question

我在一个页面中有多个标签。 Tab1正在正确显示内容，Tab2和Tab3未正确显示内容。

$(document).ready(function () {
    $('#tabHeader a').on('click',function () {
        // Set header
        $('.selectTabHeader').removeClass('selectTabHeader');
        $(this).addClass('selectTabHeader');

        // Show Actual area
        var v = this.id;

        $('.selectedTab').removeClass('selectedTab');
        $('.' + v).addClass('selectedTab');
    });
});

<div id="tabArea">
    <div id="tabHeader">
        <a class="tab selectTabHeader" id="tab1">Asia</a>
        <a class="tab" id="tab2">Europe</a>
        <a class="tab" id="tab3">Middle East</a>
    </div>
    <div id="tabData">
        <div id="tab-data" class="tab1 selectedTab">
            <div id="accordion">
                <h3>Places</h3>
                <div class="placesx">
                    <div class="placesx-data">
                        <p>Tab1 content will come here for places</p>
                    </div>
                </div>
                <h3>Hotels</h3>
                <div class="hotelx">
                    <div class="hotelx-data" data-price='299'>
                        <h4>Hotel</h4>
                        <p>Tab1 content will come here for hotel</p>
                    </div>
                    <div id="tab-data" class="tab2">
                        <div>
                            <img src="../images/tab2.jpg" height="100px" width="100%">
                            <h3>Tab 2</h3>
                            <p>Tab2 content will come here</p>
                        </div>
                    </div>
                    <div id="tab-data" class="tab3">
                        <div>
                            <img src="../images/tab3.jpg" height="100px" width="100%">
                            <h3>Tab 3</h3>
                            <p>Tab3 content will come here</p>
                        </div>
                    </div>
                </div>
            </div>
        <div/>
    </div>
</div>

Answer 1

首先，您的HTML结构不正确，下面是正确的。

<div id="tabArea">
    <div id="tabHeader">
        <a class="tab selectTabHeader" data-id="tab1">Asia</a>
        <a class="tab" data-id="tab2">Europe</a>
        <a class="tab" data-id="tab3">Middle East</a>
    </div>
    <div id="tabData">
        <div id="tab1" class="tabs selectedTab">
            <div id="accordion">
                <h3>Places</h3>
                <div class="placesx">
                    <div class="placesx-data">
                        <p>Tab1 content will come here for places</p>
                    </div>
                </div>
                <h3>Hotels</h3>
                <div class="hotelx">
                    <div class="hotelx-data" data-price='299'>
                        <h4>Hotel</h4>
                        <p>Tab1 content will come here for hotel</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="tab2" class="tabs">
            <div>
                <img src="../images/tab2.jpg" height="100px" width="100%">
                <h3>Tab 2</h3>
                <p>Tab2 content will come here</p>
            </div>
        </div>
        <div id="tab3" class="tabs">
            <div>
                <img src="../images/tab3.jpg" height="100px" width="100%">
                <h3>Tab 3</h3>
                <p>Tab3 content will come here</p>
            </div>
        </div>
    </div>

的jQuery

$(document).ready(function(){   
  $(".tabs").hide();  //first hide all the tab content 
  $(".tabs").first().show(); // display only the 1st tab content
  $("#tabHeader").find("a").click(function(e){
    e.preventDefault();
    var id = $(this).attr('data-id');

    $("#" + id).show(); // show the content for relivent tabs.
    $("#" + id).siblings().hide(); // hide other tab content

    //Do your other stuffs
  });
});

如何在单个页面中显示多个标签的内容？

1 个答案: