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，以便其他页面内容不会出现。

单个页面中有多个选项卡，但其他选项卡的内容也显示在第一个选项卡中

2 个答案: