具有特殊字符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和名稱標記必須以字母開頭（[A-ZA-Z]），並可能 後跟任意數量的字母，數字（[0-9]），連字符（「 - 」）， 下劃線（「_」），冒號（「：」）和句點（「。」）。

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