this

html bootstrap5 Sample

サンプル出力：samp

This text is meant to be treated as sample output from a computer program.

  <div>
    <samp>This text is meant to be treated as sample output from a computer program.</samp>
  </div>

JavaScriptでボタン名の変更(id指定)：thisとtoggleとtext

  <button type="button" class="btn btn-primary" aria-pressed="true" autocomplete="off" id="text-dark">toggle-btn">押してね</button>
  <script>
    // クリックされたら、ボタン名を変更する
    $("#text-dark">toggle-btn").on('click', function () {
      $(this).button('text-dark">toggle').text('押したね');
    });
  </script>

タブ型ナビゲーション（JavaScript経由）：thisとtabとshow

ホームのコンテンツが入ります。

プロフィールのコンテンツが入ります。

コンタクトのコンテンツが入ります。

  <ul class="nav nav-tabs" id="myTab_js" role="tablist">
    <li class="nav-item"><a class="nav-link active" id="home-tab" href="#home_js" role="tab" aria-controls="home"
        aria-selected="true">ホーム</a></li>
    <li class="nav-item"><a class="nav-link" id="profile-tab" href="#profile_js" role="tab" aria-controls="profile"
        aria-selected="false">プロフィール</a></li>
    <li class="nav-item"><a class="nav-link" id="contact-tab" href="#contact_js" role="tab" aria-controls="contact"
        aria-selected="false">コンタクト</a></li>
  </ul>
  <!-- パネル部分 -->
  <div class="tab-content mt-3" id="myTabContent">
    <div class="tab-pane fade show active" id="home_js" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツが入ります。</div>
    <div class="tab-pane fade" id="profile_js" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツが入ります。</div>
    <div class="tab-pane fade" id="contact_js" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツが入ります。</div>
  </div>
  <script>
    $('#myTab_js a').on('click', function (e) {
      // 本来のaの通常処理をしない
      e.preventDefault()
      $(this).tab('show')
    })
  </script>