将 Twitter Bootstrap 导航选项卡与 Jade 一起使用

Posted 2023-05-08

【中文标题】将 Twitter Bootstrap 导航选项卡与 Jade 一起使用

【英文标题】：Using Twitter Bootstrap Nav Tabs with Jade

【发布时间】：2013-01-21 05:23:37

【问题描述】：

我不明白为什么我不能使用翡翠使引导导航选项卡窗格正常工作。

这是我的代码：

head
    title= title
    link(rel='stylesheet', href='public/styles/bootstrap.css')
body
    div.tabbable.tabs-below
        div.tab-content
            div.tab-pane.active
                block content
        ul.nav.nav-tabs
            li.active 
                a(href='../', data-toggle='tab') Home
            li
                a(href='../about', data-toggle='tab') About
            li
                a(href='../blog', data-toggle='tab') Blog
            li
                a(href='../faq', data-toggle='tab') FAQ
            li
                a(href='../terms', data-toggle='tab') Terms
            li
                a(href='../privacy', data-toggle='tab') Privacy
            li
                a(href='../jobs', data-toggle='tab') Jobs
            li
                a(href='../press', data-toggle='tab') Press
    script(src="public/js/lib/jquery.js")
    script(src="public/js/lib/bootstrap.js")

单击“关于”时，我在控制台中收到以下错误：未捕获的错误：语法错误，无法识别的表达式：jquery.js:4421 中的 ../about

如果没有 data-toggle 属性，它就可以工作。但是，它不显示选择了哪个选项卡！！

【参考方案1】：

问题与jade作为视图引擎无关。这是因为正在加载一个新页面，而不是 div.tab-content 中的嵌套 div。

解决方案：How to activate not default Bootstrap tab from outer page?