jQuery でのタブの操作

Shraddha Paghdar 2024年2月15日

jQuery jQuery Tabs

今日の記事では、jQuery のタブについて学びます。

jQuery のタブ

タブは、複数の領域を持つ単一のコンテンツ領域であり、それぞれがリストの見出しに関連付けられています。タブは通常、コンテンツを複数のセクションに分割するために使用され、スペースを節約するためにアコーディオンのように交換できます。

タブには、正しく機能するために使用する必要のあるマークアップのセットが選択されています。

タブ自体は、順序付きリストまたは順序なしリストに含まれている必要があります。
各タブ title は list 要素内にあり、ラップされる href 属性を持つアンカーが付随している必要があります。
各タブパネルは任意の有効な要素にすることができますが、関連付けられたタブのアンカーのハッシュと一致する ID を持っている必要があります。

すべてのタブパネルのコンテンツ素材は、Web ページで定義するか、Ajax を介してロードできます。どちらも、タブに関連付けられているアンカーの href に基づいて自動的に処理されます。デフォルトのタブを使用すると、クリックするとオフになります。

ただし、イベントは、イベントオプションにカーソルを合わせるように変更できます。次の例でそれを理解しましょう。

コード-HTML：

<ul id="tabs">
  <li><a id="home">Home</a></li>
  <li><a id="about">About</a></li>
</ul>
<div class="container" id="homeC">Home Screen</div>
<div class="container" id="aboutC">About Us</div>

コード-CSS：

#tabs {

   width: 100%;
    height:30px;
   border-bottom: solid 1px #CCC;
   padding-right: 2px;
   margin-top: 30px;


}
a {cursor:pointer;}

#tabs li {
    float:left;
    list-style:none;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    margin-right:5px;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
      outline:none;
}

#tabs li a {

    font-family:Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
    color: #5685bc;;
   padding-top: 5px;
   padding-left: 7px;
   padding-right: 7px;
    padding-bottom: 8px;
    display:block;
    background: #FFF;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    text-decoration:none;
    outline:none;

}

#tabs li a.inactive{
    padding-top:5px;
    padding-bottom:8px;
  padding-left: 8px;
  padding-right: 8px;
    color:#666666;
    background: #EEE;
   outline:none;
   border-bottom: solid 1px #CCC;

}

#tabs li a:hover, #tabs li a.inactive:hover {


    color: #5685bc;
      outline:none;
}

.container {

    clear:both;
    width:100%;
    border-left: solid 1px #CCC;
      border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
    text-align:left;
  padding-top: 20px;

}

.container h2 { margin-left: 15px;  margin-right: 15px;  margin-bottom: 10px; color: #5685bc; }

.container p { margin-left: 15px; margin-right: 15px;  margin-top: 10px; margin-bottom: 10px; line-height: 1.3; font-size: small; }

.container ul { margin-left: 25px; font-size: small; line-height: 1.4; list-style-type: disc; }

.container li { padding-bottom: 5px; margin-left: 5px;}

コード-JavaScript：

$(document).ready(function() {
  $('#tabs li a:not(:first)').addClass('inactive');
  $('.container').hide();
  $('.container:first').show();
  $('#tabs li a').click(function() {
    var t = $(this).attr('id');
    if ($(this).hasClass('inactive')) {
      $('#tabs li a').addClass('inactive');
      $(this).removeClass('inactive');
      $('.container').hide();
      $('#' + t + 'C').fadeIn('slow');
    }
  });
});

上記の例では、すべてのタブを一覧表示する ul タグを使用してタブを定義しています。タブの内容は、デフォルトでは hide メソッドを使用して非表示になり、デフォルトでは、first タブが表示されます。

ユーザーがいずれかのタブをクリックすると、すべてのリスト要素に .inactive クラスが適用され、選択したリスト要素から .inactive クラスが削除されます。これにより、選択したリスト要素のみが常にアクティブ化されます。

上記のスニペットを jQuery をサポートするブラウザで実行すると、次の結果が表示されます。

出力：

jQuery でのタブの操作

実行コード

著者： Shraddha Paghdar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.