JavaScript与Node.js和帕格混合

我试图显示多个选项卡使用从这里http://www.w3schools.com/howto/howto_js_tabs.asp

这是我的代码：

index.pug：

html head <script> function openCity(evt, cityName) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the link that opened the tab document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script> title= title body h3= message <link rel="stylesheet" type="text/css" href="style.css"> <ul class="tab"> <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li> <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li> <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li> </ul> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> 

style.css：

 /* Style the list */ ul.tab { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Float the list items side by side */ ul.tab li {float: left;} /* Style the links inside the list items */ ul.tab li a { display: inline-block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } /* Change background color of links on hover */ ul.tab li a:hover {background-color: #ddd;} /* Create an active/current tablink class */ ul.tab li a:focus, .active {background-color: #ccc;} /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } 

我收到这个错误：

  9| // Get all elements with class="tabcontent" and hide them 10| tabcontent = document.getElementsByClassName("tabcontent"); > 11| for (i = 0; i < tabcontent.length; i++) { ---------------^ 12| tabcontent[i].style.display = "none"; 13| } 14| malformed each at makeError (/Users/node_modules/pug/node_modules/pug-lexer/node_modules/pug-error/index.js:32:13) at Lexer.error (/Users/node_modules/pug/node_modules/pug-lexer/index.js:58:15) at Lexer.each (/Users/node_modules/pug/node_modules/pug-lexer/index.js:911:12) at Lexer.callLexerFunction (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1315:23) at Lexer.advance (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1343:15) at Lexer.callLexerFunction (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1315:23) at Lexer.getTokens (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1371:12) at lex (/Users/node_modules/pug/node_modules/pug-lexer/index.js:12:42) at Object.load.string.lex (/Users/node_modules/pug/lib/index.js:93:27) at Function.loadString [as string] (/Users/node_modules/pug/node_modules/pug-load/index.js:44:24) 

如何将JavaScript与帕格混合？

Answer 1

在pug npm页面（ https://www.npmjs.com/package/pug ）上有一个embedded式javascript的小例子。 其基本上是这样的：

 html head script (type="text/javascript"). /* your javascript here */ title= title 

此外，我不知道为什么你使用部分帕格语法和部分HTML。 例如你有这样的：

 <link rel="stylesheet" type="text/css" href="style.css"> 

当它应该是这样的：

 link(rel="stylesheet" type="text/css" href="style.css") 

作为替代方法（对于JavaScript），您可以使用include指令，如下所述： https ： //pugjs.org/language/includes.html ，或者您可以将javascript放在外部文件中（就像您用css ），只需要这样做：

 script(src='app.js') 

Answer 2

首先要尝试（没有更多的细节）

如果你使用严格模式改变这个：

 for (i = 0; i < tabcontent.length; i++) 

对此

 for (var i = 0; i < tabcontent.length; i++) 

如果有效，它会教你一个教训： 随处宣告一切。 总是

如果不是，我们需要更多的细节