如何使用循环创建bootstrap可在哈停与是可切换



这是我的代码

div
    ul.nav.nav-tabs(role='tablist')
            //- li.active(role='presentation')
            //-     a(href='#session1', aria-controls='session1', role='tab', data-toggle='tab') Session 1
            //- li(role='presentation')
            //-     a(href='#session2', aria-controls='session2', role='tab', data-toggle='tab') Session 2
            //- li(role='presentation')
            //-     a(href='#session3', aria-controls='session3', role='tab', data-toggle='tab') Session 3
            //- li(role='presentation')
            //-     a(href='#session4', aria-controls='session4', role='tab', data-toggle='tab') Session 4
            each num in !{sessionsNumber}
                li(role='presentation')
                    a(href='#session' + num, aria-controls='session' + num, role='tab', data-toggle='tab') Session #{num};
    .tab-content
            #session1.tab-pane.active(role='tabpanel')
                table#myTable1.table.table-striped.table-bordered(cellspacing="0" width="100%")
            #session2.tab-pane(role='tabpanel')
                table#myTable2.table.table-striped.table-bordered(cellspacing="0" width="100%")
            #session3.tab-pane(role='tabpanel')
                table#myTable3.table.table-striped.table-bordered(cellspacing="0" width="100%")
            #session4.tab-pane(role='tabpanel')
                table#myTable4.table.table-striped.table-bordered(cellspacing="0" width="100%")

我评论的部分是预期的。但是我想将其更改为循环。!

 res.render('schedule', { sessionsNumber: JSON.stringify([1,2,3,4])})

我有console.log the!{sessionsnumber}在带有document.reary的脚本标签之一中,它显示为预期的数组。我只是不确定为什么将其更改为每个循环时它不起作用。我还检查了页面,UL标签下没有HTML组件。

任何帮助都会很感激!

res.render('schedule', { sessionsNumber: JSON.stringify([1,2,3,4])})将数组作为字符串发送到视图,因为您正在json.stringify。这不是必需的。尝试将阵列像这样发送 res.render('schedule', { sessionsNumber: [1,2,3,4]})然后用

迭代
each num in sessionsNumber
 li(role='presentation')
   a(href='#session' + num, aria-controls='session' + num, role='tab', data-toggle='tab') Session #{num}

相关内容

  • 没有找到相关文章

最新更新