HTML、CSS、jQuery: 美しいタブナビゲーションを構築する-jsチュートリアル-php.cn

HTML、CSS、jQuery: 美しいタブナビゲーションを構築する

WBOY

リリース： 2023-10-25 09:43:45

オリジナル

1191 人が閲覧しました

HTML、CSS、jQuery: 美しいタブナビゲーションを構築する

ナビゲーションは Web サイトの非常に重要な部分の 1 つであり、ユーザーが Web サイトを迅速かつ正確に見つけるのに役立ちます。彼らが望むコンテンツ。この記事では、HTML、CSS、jQueryを使って美しいタブナビゲーションを構築する方法を紹介します。

<li>HTML 構造

まず、ナビゲーションの HTML 構造を作成する必要があります。順序なしリスト (<ul></ul>) を使用してナビゲーションエントリを作成し、各エントリはリスト項目 (<li>) を使用して表されます。各リスト項目にはリンク (<a></a>) が含まれており、後のステップで使用できるように一意の ID を設定します。

サンプルコードは次のとおりです。

<ul class="nav-tabs">
  <li><a href="#tab1" class="active">标签页1</a></li>
  <li><a href="#tab2">标签页2</a></li>
  <li><a href="#tab3">标签页3</a></li>
  <li><a href="#tab4">标签页4</a></li>
</ul>

ログイン後にコピー

<li>CSS スタイル

次に、ナビゲーションにいくつかのスタイルを追加して、見栄えを良くする必要があります。ウェブサイトと一致するスタイルが一貫している。 CSS を使用してこのタスクを実行できます。

サンプルコードは次のとおりです。

.nav-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-tabs li {
    margin-right: 10px;
}

.nav-tabs li a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 5px 5px 0 0;
}

.nav-tabs li a.active {
    background-color: #fff;
    border-bottom: none;
}

ログイン後にコピー

この例では、ナビゲーションエントリのリストスタイルを none に設定し、デフォルトのリストスタイルを削除します。次に、各エントリの間隔を設定し、背景色や境界線のスタイルなど、リンクの基本的なスタイルを設定します。最後に、現在アクティブなナビゲーション項目に特別なスタイルも追加しました。

<li>jQuery スクリプト

次に、jQuery を使用して、ナビゲーション項目をクリックしたときにコンテンツ表示を切り替えるなどのインタラクティブな効果を追加する必要があります。

サンプルコードは次のとおりです。

$(document).ready(function() {
  $('.nav-tabs a').click(function(e) {
    e.preventDefault();
    $('.nav-tabs a').removeClass('active');
    $(this).addClass('active');
    
    var tabId = $(this).attr('href');
    $('.tab-content div').removeClass('active');
    $(tabId).addClass('active');
  });
});

ログイン後にコピー

この例では、最初に $(document).ready を使用して、ページが作成された後にスクリプトが実行されるようにします。ロードされています。次に、ナビゲーションリンクごとにクリックイベントを追加しました。リンクがクリックされると、まずすべてのナビゲーションリンクから active クラスを削除し、次に現在クリックされているリンクの active クラスを追加します。次に、リンクの href 属性を使用して、対応するコンテンツ領域の ID を取得し、すべてのコンテンツ領域から active クラスを削除して、現在のコンテンツ領域に を追加します。対応するコンテンツ領域。active クラス。

<li>完成効果

これで、美しいタブナビゲーションが完成しました。別のナビゲーション項目をクリックすると、それに応じてコンテンツ領域が切り替わります。

必要に応じてナビゲーションスタイルを変更し、タブナビゲーションエントリと対応するコンテンツ領域を追加できます。同時に、他のアニメーション効果を使用してユーザーエクスペリエンスを向上させることもできます。

概要

HTML、CSS、jQuery を使用して美しいタブナビゲーションを構築するのは、シンプルで楽しい作業です。適切な HTML 構造、CSS スタイル、jQuery スクリプトを使用すると、魅力的なナビゲーション効果を作成し、ユーザーに優れたユーザーエクスペリエンスを提供できます。この記事が独自のタブナビゲーションの作成に役立つことを願っています。

以上がHTML、CSS、jQuery: 美しいタブナビゲーションを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。