jquery 的语义选项卡和把手问题，选项卡内容未变为活动状态

Question

所以我希望生成带有把手的动态数量的语义样式选项卡。到目前为止，handlebars 在语义上没有问题，但这个实例发生了一些奇怪的事情。当我单击一个选项卡时，该选项卡变为活动状态，但它的相应元素从不显示。在元素选项卡中，我可以看到 div 的 class 名称正在更新，所以我知道它找到了将 "active" class 添加到的正确元素，但是它从未添加。以下是我的简化解决方案，显示了该问题。

function createGrid(){
  var gridInfo = document.getElementById("gridTemplate").innerHTML;
  var template = Handlebars.compile(gridInfo);

  var name = 'myName'
  var componentsUsed = ['myName', 'myName1', 'myName2']
  var gridobj = {
    tabs: [],
    name:name
    
  }
  for (var i = 0; i < componentsUsed.length; i++){
    gridobj.tabs.push({tabName:componentsUsed[i]})
  }
  gridData = template(gridobj)
  document.getElementById("data3").innerHTML += gridData;
  var firstTab = "#tab" + componentsUsed[0]
  var firstTabContent = '#' + componentsUsed[0]
  $(firstTab).addClass("active");
  $(firstTabContent).addClass("active");

}



createGrid()
$('.menu .item')
  .tab()
;




//end

<html lang="en">
<head>
  <meta charset="utf-8"> 
  <!--<link rel="stylesheet" href="css/style.css">-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
    <script id="gridTemplate" type="text/x-handlebars-template"> 

    <div class="ui top attached tabular menu">
      {{#each tabs}}
        <a class="item" id="tab{{tabName}}" data-tab="{{tabName}}">{{tabName}}</a>
      {{/each}}

      {{#each tabs}}
      <div id="{{tabName}}" class="ui bottom attached tab segment" data-tab="{{tabName}}">
        <h2>Content for {{tabName}}</h2>
      </div>
    {{/each}}

  </div>
  </script>
</head>

<body>
  <div id="data3"></div>
</body>
</html>

制表符语法与非常基本的语义 UI 制表符示例中的语法相同。这里的问题在哪里？这是一个没有车把的工作示例：

$('.menu .item')
  .tab()
;

<html lang="en">
<head>
  <meta charset="utf-8">
  <!--<link rel="stylesheet" href="css/style.css">-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
    
  
</head>

<body>
  <div class="ui top attached tabular menu">
    <a class="item active" data-tab="first">First</a>
    <a class="item" data-tab="second">Second</a>
    <a class="item" data-tab="third">Third</a>
  </div>
  <div class="ui bottom attached tab segment active" data-tab="first">
    First
  </div>
  <div class="ui bottom attached tab segment" data-tab="second">
    Second
  </div>
  <div class="ui bottom attached tab segment" data-tab="third">
    Third
  </div>
</body>
</html>

Answer 1

您的结束 </div> 标签丢失:)

function createGrid(){
  var gridInfo = document.getElementById("gridTemplate").innerHTML;
  var template = Handlebars.compile(gridInfo);

  var name = 'myName'
  var componentsUsed = ['myName', 'myName1', 'myName2']
  var gridobj = {
    tabs: [],
    name:name
    
  }
  for (var i = 0; i < componentsUsed.length; i++){
    gridobj.tabs.push({tabName:componentsUsed[i]})
  }
  gridData = template(gridobj)
  document.getElementById("data3").innerHTML += gridData;
  var firstTab = "#tab" + componentsUsed[0]
  var firstTabContent = '#' + componentsUsed[0]
  $(firstTab).addClass("active");
  $(firstTabContent).addClass("active");

}



createGrid()
$('.menu .item')
  .tab()
;




//end

<html lang="en">
<head>
  <meta charset="utf-8"> 
  <!--<link rel="stylesheet" href="css/style.css">-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
    <script id="gridTemplate" type="text/x-handlebars-template"> 

    <div class="ui top attached tabular menu">
      {{#each tabs}}
        <a class="item" id="tab{{tabName}}" data-tab="{{tabName}}">{{tabName}}</a>
      {{/each}}
    <!-- this tag was missing -->
    </div>
      {{#each tabs}}
      <div id="{{tabName}}" class="ui bottom attached tab segment" data-tab="{{tabName}}">
        <h2>Content for {{tabName}}</h2>
      </div>
    {{/each}}

  </div>
  </script>
</head>

<body>
  <div id="data3"></div>
</body>
</html>

jquery 的语义选项卡和把手问题，选项卡内容未变为活动状态

Semantic Tabs and handlebars issue with jquery, tab content not becoming active

html

javascript

jquery

handlebars.js

semantic-ui