app.py: @app.route('/infor') #页面链接该路由名称 def f_infor(): return render_template('main.html') # 词云分析 @app.route('/WordAnalysis') #页面链接该路由名称 def WordAnalysis(): return render_template('WordAnalysis.html') # 数据查询 @app.route('/test') #页面链接该路由名称 def test(): return render_template('test.html')
layui:
//触发事件 var active = { tabChange: function (id) { //切换到指定Tab项 element.tabChange('demo', id); //切换到:用户管理 }, ltabAdd: function (url, id, name) { //新增一个Tab项 传入三个参数,分别对应其标题,tab页面的地址,还有一个规定的id,是标签中data-id的属性值 //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分 element.tabAdd('demo', { title: name, url: 'test', content: '<iframe src="' + url + '" name="' + name + '" style="width:100%;height:99%;" frameborder="0" class="layadmin-iframe"></iframe>', id: id //规定好的id }) CustomRightClick(id); //给tab绑定右击事件 FrameWH(); //计算ifram层的大小 } };
html:
<li class="layui-nav-item"> <a data-url="{{ url_for('WordAnalysis') }}" data-id="1" data-title="词云分析" href="#" class="site-demo-active" data-type="ltabAdd">词云分析</a> </li> <li class="layui-nav-item"> <a data-url="{{url_for('test')}}" data-id="2" data-title="数据查询" href="#" class="site-demo-active" data-type="ltabAdd">数据查询</a> </li> <li class="layui-nav-item"> <a data-url="{{url_for('test')}}" data-id="3" data-title="数据统计" href="#" class="site-demo-active" data-type="ltabAdd">数据统计</a> </li> </ul>
效果图: