[英]jquery navigation bar with flask/python
I built a simple webpage with Dreamweaver including a simple navigation bar working with jquery. 我用Dreamweaver构建了一个简单的网页,其中包括一个使用jquery的简单导航栏。 It is running on my RPi with Flask, but the Navigation does not work anymore.
它在Flask的RPi上运行,但是导航不再起作用。
HTML CODE: HTML代码:
<table width="100%" height ="100%" border="0">
<tr>
<td width="120px" valign="top">
<ul id="Navigation" class="nav">
<li id="home" ><a data-site="home" href=""><br><img src="{{ url_for('static',filename='icons/Home.png')}}" width="40" height="40"><br> Home</a></li>
<li id="light"><a data-site="light" href=""></a></li>
<li id="htpc"><a data-site="htpc" href=""></a></li>
</ul>
</td>
<td class="content" valign="top" ></td>
</tr>
</table>
jquery: jQuery的:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".content").load("{{ url_for('static', filename='home.html')}}");
$('.nav a').click(function(e){
e.preventDefault();
var site = $(this).data('site');
site = site + '.html';
$(".content").load(site);
});
});
</script>
I replaced some links with the url_for
function which is working very well(for images). 我用
url_for
函数替换了一些链接,该函数效果很好(对于图片)。 I got the home.html
working but the rest does not work. 我让
home.html
工作了,但其余的都没有工作。 I got the 404
error " light.html not found
" when i click on the li-element " light
". 当我单击li元素“
light
”时,出现404
错误“ light.html not found
”。 I'm sure the path is wrong but how can i fix this in a simple way? 我确定路径是错误的,但是如何以简单的方式解决呢?
Got It working! 得到它的工作!
A @app.route
is needed in the *.py file. * .py文件中需要
@app.route
。
(...)
@app.route("/light", methods=['GET'])
def light():
return render_template('light.html')
(...)
The light.html
has to be in the /templates
folder. light.html
必须位于/templates
文件夹中。 It can be used with "/light"
. 可以与
"/light"
。 I did this for the home.html
, too. 我也是针对
home.html
这样做的。 Perhaps not the best way but it works! 也许不是最好的方法,但是它可行!
Like This: 像这样:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".content").load("/home");
$('.nav a').click(function(e){
e.preventDefault();
var site = $(this).data('site');
site = '/' + site;
$(".content").load(site);
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.