HTML、CSS、jQueryを使用してタブ付きWebサイトを作成する方法-jsチュートリアル-php.cn

HTML、CSS、jQueryを使用してタブ付きWebサイトを作成する方法

WBOY

リリース： 2023-10-26 09:54:20

オリジナル

681 人が閲覧しました

HTML、CSS、jQueryを使用してタブ付きWebサイトを作成する方法

HTML、CSS、jQueryを使ってタブ付きのWebサイトを作る方法

今日は、HTML、CSS、jQueryを使ってタブ付きのWebサイトを作る方法を紹介します。タブページタブのある Web サイト。タグは、Web サイトのコンテンツを効果的に整理して表示し、より良いユーザーエクスペリエンスを提供するのに役立ちます。以下に具体的なコード例を示します。

まず、HTML を使用して Web サイトの基本構造を作成します。タブを含む親コンテナが必要で、その中にタブに対応するコンテンツブロックを作成します。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>带有标签页的网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="tabs">
        <ul class="tab-links">
            <li class="active"><a href="#tab1">标签1</a></li>
            <li><a href="#tab2">标签2</a></li>
            <li><a href="#tab3">标签3</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab1" class="tab active">
                <h2>标签1内容</h2>
                <p>这是标签1的内容。</p>
            </div>
            <div id="tab2" class="tab">
                <h2>标签2内容</h2>
                <p>这是标签2的内容。</p>
            </div>
            <div id="tab3" class="tab">
                <h2>标签3内容</h2>
                <p>这是标签3的内容。</p>
            </div>
        </div>
    </div>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

次に、CSS を使用してタブのスタイルを設定します。フレックスレイアウトを使用して、ラベルとコンテンツブロックの配置と、いくつかの基本的なスタイルを実装します。

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.tabs {
    margin: 20px;
}

.tab-links {
    display: flex;
    list-style: none;
    padding: 0;
}

.tab-links li {
    margin-right: 10px;
}

.tab-links li a {
    display: block;
    padding: 10px;
    background-color: #ccc;
    text-decoration: none;
    color: #000;
    border-radius: 5px 5px 0 0;
}

.tab-links li.active a {
    background-color: #fff;
}

.tab-content {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 0 5px 5px 5px;
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}

ログイン後にコピー

最後に、jQuery を使用してラベルの切り替え効果を実現します。

$(document).ready(function() {
    $(".tab-links li").click(function() {
        var tabId = $(this).find("a").attr("href");

        $(".tab").removeClass("active");
        $(".tab-links li").removeClass("active");

        $(this).addClass("active");
        $(tabId).addClass("active");
    });
});

ログイン後にコピー

これでタブ付きのWebサイトが完成しました。別のタブをクリックすると、対応するコンテンツブロックが表示され、他のコンテンツブロックは非表示になります。必要に応じて、さらにタグとコンテンツブロックを追加できます。

この記事があなたのお役に立ち、HTML、CSS、jQuery を使ってタブのある Web サイトを簡単に作成できるようになれば幸いです。ご質問がございましたら、お気軽にお問い合わせください。

以上がHTML、CSS、jQueryを使用してタブ付きWebサイトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。