express - 如何在 Pug 中创建选项卡
问题描述
我在 Visual Studio 中有一个 Node/Express 应用程序,我想创建选项卡,因此当您单击选项卡时,它会显示下面的内容。问题是,我使用的是 HTML--> Pug 转换器(我对 Pug 很陌生),所以如果其中发生了冲突,我不会感到惊讶。下面是我的代码,但没有显示任何内容,当我单击选项卡时,它只会稍微改变颜色(显示在东京选项卡中),但不显示任何内容。
这是我到目前为止所拥有的index.pug
:
extends layout
block content
doctype html
html(lang="en")
head
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1')
section
nav
ul
li.title Study Bot
li.robot
img(src='/images/robot-face.jpg' alt='Robot face' width='130px')
article
footer
// Tab links
.tab
button.tablinks(onclick="openCity(event, 'London')") London
button.tablinks(onclick="openCity(event, 'Paris')") Paris
button.tablinks(onclick="openCity(event, 'Tokyo')") Tokyo
// Tab content
#London.tabcontent
h3 London
p London is the capital city of England.
#Paris.tabcontent
h3 Paris
p Paris is the capital of France.
#Tokyo.tabcontent
iframe#encyclopedia-window(src='https://en.wikipedia.org/wiki/')
在我main.css
的(相关部分):
footer {
background-color: #666;
height: 500px;
padding: 10px;
text-align: center;
font-size: 35px;
color: white;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;initial-letter
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
#encyclopedia-window {
position: relative;
margin-top: 25px;
height: 90%;
width: 95%;
}
这也在我的index.js
:
/* Clickable tabs */
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
解决方案
这出乎意料地简单。我只需要在index.js
文件末尾的文件中包含对我的脚本的引用index.pug
,我需要在其中调用该部分中使用的函数。
所以我补充说:
script
include ../routes/index.js
这是在index.pug
文件的上下文中:
extends layout
block content
doctype html
html(lang="en")
head
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1')
section
nav
ul
li.title Study Bot
li.robot
img(src='/images/robot-face.jpg' alt='Robot face' width='130px')
article
footer
// Tab links
.tab
button.tablinks(onclick="openCity(event, 'London')") London
button.tablinks(onclick="openCity(event, 'Paris')") Paris
button.tablinks(onclick="openCity(event, 'Tokyo')") Tokyo
// Tab content
#London.tabcontent
h3 London
p London is the capital city of England.
#Paris.tabcontent
h3 Paris
p Paris is the capital of France.
#Tokyo.tabcontent
iframe#encyclopedia-window(src='https://en.wikipedia.org/wiki/')
script
include ../routes/index.js