單個頁面中有多個選項卡，但其他選項卡的內容也顯示在第一個選項卡中

Question

這是我的HTML代碼：

<div class="tab-content">
            <div id="tab1" class="tab active">
                <p>Hotels In Asia</p> <br>
                <div class="asia1">
                    <p class="para1">$499 for 1 night</p>
                    <button>Book Now</button>
                    <a href="#"><p class="para2">See Photo</p></a>
                </div>
                <div class="asia1">
                    <p class="para1">$499 for 1 night</p>
                    <button>Book Now</button>
                    <a href="#"><p class="para2">See Photo</p></a> 
                </div>
                <div class="asia1">
                    <p class="para1">$499 for 1 night</p>
                    <button>Book Now</button>
                    <a href="#"><p class="para2">See Photo</p></a> 
                </div>

                 <div class="tab11">
                    <div class="place active">
                        <p>Places In Asia</p>
                        <div class="asia">
                            <img src="../images/asia_hotel_1.jpg" alt="Asia hotel">
                        </div>
                        <div class="asia">
                            <img src="../images/asia_hotel_2.jpg" alt="Asia hotel">
                        </div>
                        <div class="asia">
                            <img src="../images/asia_hotel_3.jpg" alt="Asia hotel">
                        </div> 
                    </div>
                </div> <!-- tab11 end--> 
            </div><!-- tab1 end-->
            <div id="tab2" class="tab">
                <p>Hotels In Europe</p>
                <p>para of tab2</p>
            </div>
            <div id="tab3" class="tab">
                <p>Tab 3 content here!</p>
                <p>para of tab3</p>
            </div>
            <div id="tab4" class="tab">
                <p>Tab 4 content here!</p>
                <p>para of tab4</p>
            </div> 
        </div>
    </div>  

這是我在單個頁面中用於多個選項卡的jquery。

<script type="text/javascript">
    $(document).ready(function() {
        $('.tab-links a').on('click', function(e)  {
            var currentAttrValue = $(this).attr('href');

    // Show/Hide Tabs
    $('.tabs ' + currentAttrValue).delay(400).slideDown(400);
    $('.tabs ' + currentAttrValue).siblings().slideUp(400);

    // Change/remove current tab to active
                     $(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault();
});
    });
</script>

當我打開html頁面時，其他選項卡的所有內容也顯示在第一個選項卡中。 但是當我切換到其他選項卡時，內容顯示良好。

Answer 1

希望這段代碼能起作用。 請測試一次。

$(document).ready(function() {
    $(".tab").hide(); // first hide all the tabs
    $(".tab").first().show(); // show only first tab by default
    $('.tab-links a').on('click', function(e)  {
    e.preventDefault();
        var currentAttrValue = $(this).attr('href');
            currentAttrValue = currentAttrValue.substring(1); // Remove # from the href

        // Show/Hide Tabs
        $('#' + currentAttrValue).delay(400).slideDown(400); //add # to get the element id with specific id.
        $('#' + currentAttrValue).siblings().slideUp(400);

        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');

    });
});

Answer 2

到達目標網頁時，您必須指定標簽ID，以免其他頁面內容出現。