特殊文字IDのブートストラップタブ

Question

ファイルの場所に基づいてIDを持つブートストラップタブのナビゲーションバーを作成しようとしています。例：home.htmlはsample/default/home.htmlにあります。しかし、スラッシュとピリオドをIDの中に入れても、タブシステムは機能しません。私は別のIDのように "ホーム"、 "プロファイル"、などなど

<div class="card" style="height:100%;"> 
    <div class="card-header"> 
     <ul class="nav nav-tabs card-header-tabs float-xs-left" role="tablist"> 
      <li class="nav-item"> 
       <a class="nav-link active" data-toggle="tab" href="#sample/default/home.html" role="tab">Home</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" data-toggle="tab" href="#sample/default/profile.html" role="tab">Profile</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" data-toggle="tab" href="#sample/default/messages.html" role="tab">Messages</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" data-toggle="tab" href="#sample/default/settings.html" role="tab">Settings</a> 
      </li> 
     </ul> 
    </div> 

    <div class="tab-content card-block"> 
     <div class="tab-pane active" id="sample/default/home.html" role="tabpanel">home</div> 
     <div class="tab-pane" id="sample/default/profile.html" role="tabpanel">profile</div> 
     <div class="tab-pane" id="sample/default/messages.html" role="tabpanel">messages</div> 
     <div class="tab-pane" id="sample/default/settings.html" role="tabpanel">settings</div> 
    </div> 
</div> 

Answer 1

IDとNAMEトークンを使用する場合には、文字（[A-ZA-Z]）と5月で開始する必要があります完全に正常に動作します数字（[0-9]）、ハイフン（ - ）、 アンダースコア（ "_"）、コロン（ "："）、ピリオド（ "。"）のいずれかの数字が続きます。

参考：https://www.w3.org/TR/html4/types.html#type-id