帶有瓶子的jquery導航欄/ python

Question

我使用Dreamweaver構建了一個簡單的網頁，其中包括一個簡單的使用jquery的導航欄。它使用Flask在我的RPi上運行，但導航不再工作。

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：

<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> 

我替換爲url_for功能，工作得非常好（用於圖像）的鏈接。我得到了home.html工作，但其餘的不起作用。 當我點擊li元素「light」時，我得到了404錯誤「light.html not found」。我確信路徑是錯誤的，但我怎樣才能以簡單的方式解決這個問題？

Answer 1

得到它的工作！

在* .py文件中需要一個@app.route。

(...) 
@app.route("/light", methods=['GET']) 
def light(): 
    return render_template('light.html') 
(...) 

的light.html必須是在/templates文件夾中。 它可以用於"/light"。我也爲home.html做過。也許不是最好的方式，但它的工作原理！

這樣的：

<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>