因此,我希望生成带有把手的动态数量的语义样式选项卡。到目前为止,使用语义的方法还不错,但是这种情况正在发生怪异的事情。当我单击一个选项卡时,该选项卡将变为活动状态,但是其相应的元素永远不会显示。在elements选项卡中,我可以看到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}}
{{#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>
答案 0 :(得分: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>