1

我正在 ejs 中构建一个 hexo 博客主题，它将为我的技术文档项目设置样式。我想允许用户选择一种语言（JavaScript 或 TypeScript）。然后我想输入类似的代码片段：

{% js %}
```JavaScript
var geolocation = require("nativescript-geolocation");
```
{% endjs %}

{% ts %}
```TypeScript
import geolocation = require("nativescript-geolocation");
```
{% endts %}

然后是两个按钮/一个滑块，因此用户可以选择 typescript 或 javascript（默认为 js）。我对 UI 实现感到满意，但不确定如何设置属性来确定使用上述哪些片段？

并且根据用户选择的语言，将显示正确的片段。我怎么能实现这个？

4

1 回答 1

1

想象一下，你的 Hexo 标签的输出是这样的。

<div>
  <div class="codeblock js">
    var geolocation = require("nativescript-geolocation");
  </div>
  <div class="codeblock ts">
    import geolocation = require("nativescript-geolocation");
  </div>
</div>

现在，您必须编写 javascript 到：

  • 默认显示代码块（默认语言）
  • 单击按钮时以所需语言显示代码块
  • 保存所选语言以在页面刷新或更改时显示正确的语言

这是一个在JSFiddle中使用 jQuery 库的示例，因为在 SO 的代码段中不允许会话存储

在此示例中，我使用了.hide()and.show()方法，但您也可以使用 CSS 类来执行此操作。.addClass()在所需语言代码块上添加类 ( )，并.removeClass()使用一些 css 在其他代码块上删除类 ()：

.codeblock {
  display:none;
}
.codeblock.active {
  display:block;
}
于 2016-08-02T13:36:46.493 回答