具有特殊字符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