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

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 サイトの他の関連記事を参照してください。