使用href查询将html按一下加载到div中

Question

我试图根据div中的href-clicking更改内容。我是个自由式剪报新手，所以请对我温柔点。

因此，我有一个带有index.html的<div>，其中加载了三个不同的本地html页面(menu.html) ->餐厅菜单。在每个menu.html的开头，我想让<a href>-links在index.html中更改菜单。

我的问题是:当我用脚本调用的href链接位于menu.html内部时，如何调用menu.html？

到目前为止，我已经：

1. 默认情况下，index.html在div id：'alacarte.html‘中加载菜单’alacarte.html‘。
2. 我想按一下'alacarte.html‘中的链接，在index.html div：’index.html‘中输入'pizza.html’负载。
3. 我真的很想把链接以图形的方式放在页面的上面，比如‘piza.html’页面。

在我的index.html中有：

<article class="post-meny" id="meny">
<script type="text/javascript">
   $(document).ready(function(){
       $("#alacarte").click(function(){
        $('#result').load('alacarte.html');
       });  
       $("#beverage").click(function(){
        $('#result').load('pizza.html');
       });  
       $("#beverage").click(function(){
        $('#result').load('beverage.html');
       });
   });
</script>
<div id="result"></div>

<script>
   $(document).ready(function(){
       $( '#result' ).load( 'alacarte.html' );
   });
</script>

</article>

在菜单页面'alacarte.html‘中

<!-- Links in restaurant menu that loads in index.html div id: result -->
<ul class="menu-navbar">
  <li>
     <a id="#pizza" href="#">PIZZA</a>
  </li>
  <li>
     <a id="#alacarte" href="#">A LA CARTE</a>
  </li>
  <li>
    <div id="#beverege" class="#">BEVERAGE</div>
  </li>
</ul>

<script type="text/javascript">
  $(document).ready(function(){

     $("#alacarte").click(function(){
         $('index.html#result').load('alacarte.html');
     });
     $("#beverage").click(function(){
         $('index.html#result').load('beverage.html');
     });
     $("#pizza").click(function(){
         $('index.html#result').load('pizza.html');
     }); 
  } 
 </script>

我希望你能听我的解释。我怎么发动汽车呢？

请帮帮我！

Answer 1

由于要将项动态加载到index.html中，所以应该使用.on()方法绑定和侦听事件。您不需要在各个页面本身中包含任何进一步的jQuery。

对于菜单，我建议在href属性中包括超链接，然后使用e.preventDefault()停止默认行为。

<ul class="menu-navbar">
  <li>
     <a href="pizza.html">PIZZA</a>
  </li>
  <li>
     <a href="alacarte.html">A LA CARTE</a>
  </li>
  <li>
    <a href="beverage.html">BEVERAGE</a>
  </li>
</ul>

在index.html中，您可以利用.on()方法：

$(function() {
    // Use .on() to bind click even on dynamically added elements
    $(document).on('click', '.menu-navbar a', function(e) {

        // Prevents default behavior
        // Clicking on <a> will not redirect the page
        e.preventDefault();

        // Get hyperlink, and load page
        $('#result').load($(this).attr('href'));
    });

    // Load the first link by default, when DOM is ready
    $('#result').load('alacarte.html');
});