使用jquery / javascript的特定div加载函数

时间:2018-03-12 10:12:27

标签: javascript jquery

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

         $('#bgc').on('click',function(){
         alert('clicked');
         var url='/shop/category/type-bulb-4';
           $('#products_grid').load(url+ '#tabdiv');
           });
     });
 </script>

我想只加载products_grid div id ..当我点击另一个&#39; a&#39;标签..

例如..当我点击id =&#34; bgc&#34; ..产品将显示在products_grid div ...然后我点击id =&#34; bgc5&#34;只有在没有重新加载整个页面的情况下才会加载products_grid div ... 我累了jquery函数..

{{1}}

但它不起作用..

1 个答案:

答案 0 :(得分:0)

您需要将href更改为href =“#”或data-url,如此

<section class="s_features">
    <center>
      <h4 style="padding-top: 1%;padding-bottom: 1%;font-family:timesnewroman;">PRODUCTS</h4>
    </center>
    <div class="container hidden-xs" id="moto" style="">
      <div class="container">
        <div class="row">

            <div class="col-md-2">
              <a id="bgc" data-url="/shop/category/light-bulb-4" class="btn btn-default">
                <img class="img img-responsive padding-xl" src="/web/image/426/2543.png" alt="Odoo image and text block" data-original-title="" title="" style="">
                <span style="font-family:timesnewroman;">BULB</span>
              </a>
              <br>
            </div>
            <div class="col-md-2">
              <a id="bgc5" data-url="/shop/category/light-tube-light-9" class="btn btn-default">
                <img class="img img-responsive center-block padding-large" src="/web/image/707/png.png" alt="Odoo image and text block" data-original-title="" title="" style="">
                <span style="font-family:timesnewroman;">TUBE LIGHT</span>
              </a>
              <br>
            </div>

      </div>
    </div></div></section>
<div class="col-md-9" id="products_grid">
<table id="tabdiv">
</table>
</div>

JS

<script type="text/javascript">
$(function(){
     $('#bgc').on('click',function(){
     //var url = $(this).data('url');
     // if you want to display image in table 
    $('#tabdiv').html($(this).html());   
    $('#tabdiv').find('span').remove();
   });
 });
</script>