Bootstrap 4のタブ切り換えのエラー

Question

前提・実現したいこと

ドットインストールのBootstrap 4入門の#17を参考にタブメニューを作成しているのですが、以下の問題が発生しました。

発生している問題・エラーメッセージ

タブメニューの切り換えを試したところ、一度目は切り替わったのですが、メニューをiOS→Android→iOSと切り換えたあと、Android側へ切り替えができない状態になりました。

該当のソースコード

      <section class="py-5">
        <h2 class="mb-5 text-center">How to use</h2>
        <div class="container">
          <ul class="nav nav-tabs">
            <li class="nav-item"><a href="#ios" class="nav-link active" data-toggle="tab">iOS</a></li>
            <liclass="nav-item"><a href="#android" class="nav-link" data-toggle="tab">Android</a></li>
          </ul>
          <div class="tab-content py-4">
            <div id="ios" class="tab-pane active">
              <p>Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS.</p>
            </div>
            <div id="android" class="tab-pane">
              <p>Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android.</p>
            </div>
          </div>
        </div>
      </section>

試したこと

ディベロッパーツールで調べたところ、iOS→Android→iOSと切り換えた際に、Android側のnav-linkのactiveが消えず、iOSとAndroidのタブ２つがともにactiveになっていました。
多分ここが問題だと思うのですが、修正するべき点がわからない状態です。

Answer 1

x <liclass="nav-item">
o <li class="nav-item">

Comments

[Yamachoo]

ありがとうございます。
スペルミスだったんですね……。