首页
学习
活动
专区
圈层
工具
发布

如何在页面加载时选择第二个引导页签?

要在页面加载时选择第二个引导页签,您可以使用JavaScript/jQuery来实现

使用原生JavaScript:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab {
            display: inline-block;
            padding: 10px;
            cursor: pointer;
        }
        .tab-content {
            display: none;
        }
        .active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="tabs">
        <div class="tab" data-target="tab1">Tab 1</div>
        <div class="tab active" data-target="tab2">Tab 2</div>
        <div class="tab" data-target="tab3">Tab 3</div>
    </div>
    <div class="tab-contents">
        <div class="tab-content" id="tab1">Content 1</div>
        <div class="tab-content active" id="tab2">Content 2</div>
        <div class="tab-content" id="tab3">Content 3</div>
    </div>

    <script>
        window.onload = function() {
            var secondTab = document.querySelector('.tab[data-target="tab2"]');
            var secondTabContent = document.getElementById('tab2');

            secondTab.classList.add('active');
            secondTabContent.classList.add('active');
        }
    </script>
</body>
</html>

使用jQuery:

首先,确保在HTML文件中引入了jQuery库。

代码语言:javascript
复制
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后,使用以下代码:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab {
            display: inline-block;
            padding: 10px;
            cursor: pointer;
        }
        .tab-content {
            display: none;
        }
        .active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="tabs">
        <div class="tab" data-target="tab1">Tab 1</div>
        <div class="tab active" data-target="tab2">Tab 2</div>
        <div class="tab" data-target="tab3">Tab 3</div>
    </div>
    <div class="tab-contents">
        <div class="tab-content" id="tab1">Content 1</div>
        <div class="tab-content active" id="tab2">Content 2</div>
        <div class="tab-content" id="tab3">Content 3</div>
    </div>

    <script>
        $(document).ready(function() {
            var secondTab = $('.tab[data-target="tab2"]');
            var secondTabContent = $('#tab2');

            secondTab.addClass('active');
            secondTabContent.addClass('active');
        });
    </script>
</body>
</html>

这两种方法都会在页面加载时选择第二个引导页签。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券