基于用户select的环境的select性ejs模板

我正在ejs中build立一个hexo博客主题，这将风格我的技术文档项目。 我想让用户select一种语言（JavaScript或TypeScript）。 然后我想input代码片段，如：

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

然后两个button/一个滑块，以便用户可以select打字稿或JavaScript（这将默认为js）。 我很熟悉UI的实现，但不知道如何设置一个属性来确定上面哪个片段被使用？

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

Answer 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到：

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

以下是JSFiddle中的 jQuery库示例，因为会话存储不允许在SO上的代码片段中使用

在这个例子中，我使用了.show() .hide()和.show()方法，但是也可以使用CSS类来完成。 在所需的语言代码块上添加一个类（ .addClass() ），并使用一些css删除其他代码块中的类（ .removeClass() ）：

 .codeblock { display:none; } .codeblock.active { display:block; }