嘿，我明白你想实现的效果——点击按钮后动态切换页面里的某个模板片段对吧？不过这里有个关键问题得先搞清楚：Jinja2的模板渲染是在服务器端完成的，当页面加载到浏览器的时候，{% include %}这种标签早就被替换成实际的HTML内容了，前端的JS/JQuery根本看不到这些Jinja语法，所以你直接想替换{% include %}标签是行不通的。

给你两个可行的解决方案，根据你的场景选就行：

方案一：AJAX动态请求后端渲染的模板片段（推荐） #

这个方法是让前端点击按钮后，发请求给Flask后端，让后端帮你渲染新的模板片段，再把结果返回给前端替换原有内容，步骤如下：

1. 在Flask里添加一个专门返回模板片段的路由
   记得加个安全校验，防止恶意请求：

   @app.route('/get-dynamic-template/<template_name>')
   def get_dynamic_template(template_name):
       # 只允许切换你指定的模板，避免安全风险
       allowed_templates = ['file.name', 'file1.name']
       if template_name not in allowed_templates:
           return "", 403  # 返回禁止访问
       return render_template(template_name)
   

2. 给页面中要替换的区域加个唯一ID
   方便JQuery定位：

   <section id="dynamic-content-area">
       {% include 'file.name' %}
   </section>
   

3. 写JQuery的点击事件逻辑
   点击按钮时发AJAX请求，替换内容：

   $(".btnt").click(function(){
       // 请求后端获取file1.name对应的渲染结果
       $.get('/get-dynamic-template/file1.name', function(response) {
           // 把返回的HTML替换到目标区域
           $("#dynamic-content-area").html(response);
       });
   });
   

这个方案的优势是灵活，不管模板内容多复杂，后端都能正确渲染，而且安全性可控。

方案二：提前加载所有模板内容，切换显示状态 #

如果要切换的模板数量不多，可以提前把所有可能的内容都渲染到页面，用CSS隐藏，点击按钮时切换显示/隐藏：

1. HTML部分（提前渲染所有内容）

   <section id="dynamic-content-area">
       <div class="template-block active">{% include 'file.name' %}</div>
       <div class="template-block">{% include 'file1.name' %}</div>
   </section>
   

2. CSS控制显示隐藏

   .template-block {
       display: none;
   }
   .template-block.active {
       display: block;
   }
   

3. JQuery切换逻辑

   $(".btnt").click(function(){
       // 移除当前active的类，给另一个区块加上
       $("#dynamic-content-area .template-block.active").removeClass("active");
       $("#dynamic-content-area .template-block:not(.active)").addClass("active");
   });
   

这个方案不用发AJAX，响应速度更快，适合内容少且固定的场景。

最后再提醒下：绝对不要尝试在前端写{% include %}这种Jinja语法，浏览器会把它当成普通文本直接显示，根本不会解析~

备注：内容来源于stack exchange，提问作者Harold Meneley