Question

我正在尝试根据div更改href-clicking中的内容。我是自由形式的scritpting的新手，所以请对我温柔。

所以，我有一个带有<div>的index.html，我加载了三个不同的本地html页面（menu.html） - ＆gt;餐厅菜单。在每个menu.html的头部，我想要<a href> - 用于更改放置在index.html中的菜单的链接。

我的问题是：一旦我用脚本调用的href-link位于menu.html内，我该如何调用index.html？

到目前为止，我有：

index.html默认情况下在div id：'result'中加载菜单'alacarte.html'。
我想在'alacarte.html'中按下链接，在index.html div id：'result'中加上'pizza.html'加载。
我真的希望将链接以图形方式放在“pizza.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');
});

通过使用带有href的查询单击到div来加载html

1 个答案: