使用AJAX在div中加載下拉菜單內容

Question

我的目標是單擊下拉菜單（div id = cssmenu）元素並在使用AJAX的情況下顯示數據，所以我制作了一個小的js代碼，但我不知道如何才能將其加載到我提到並擦除的div中div之前顯示的內容。

HTML

<body>

<div class="container">
  <div class="row"> 
  <div class="col-md-3" >

     <div id='cssmenu'>
<ul>
   <li class='active'><a href='#' data-url="http://localhost/bioinformatica/Main_page/Quick_search.html#qhelp"><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>About</span></a>
      <ul>
         <li><a href='#'><span>Project</span></a></li>
         <li class='last'><a href='#'><span>Team</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>News</span></a></li>
</ul>
</div> 
    </div>

    <div class="col-md-9">
    <div id="tabs">
    <ul class="nav nav-tabs" id="prodTabs">
        <li class="active"><a class="clickableLink" href="#tab_quick" data-url="http://localhost/bioinformatica/Main_page/Quick_search.html#qhelp">Quick Search</a></li>
        <li><a class="clickableLink" href="#tab_advanc" data-url="#">Advanced Search</a></li>
        <li><a class="clickableLink" href="#tab_struct" data-url="something3.txt">Structure Search</a></li>
    </ul>
    <div class="tab-content">
        <div id="tab_quick" class="tab-pane active"></div>
        <div id="tab_advanc" class="tab-pane active"></div>
        <div id="tab_struct" class="tab-pane active"></div>
    </div>
</div>

  </div>
    </div>


    <div class="clearfix visible-lg"></div>
  </div>
</div>

</body>
</html>

使用Javascript

$( document ).ready(function() {

$('#cssmenu a').click(function (e) {
    e.preventDefault();

    var url = $(this).attr("data-url");
    var href = this.hash; 
    var pane = $(this);

    // ajax load from data-url
    $(href).load(url,function(result){      
        pane.tab('show');
    });

});
});

例如在菜單中，當我單擊Home時，我希望它在div id = tabs中加載它的data-url attr，即用Home data-url替換所有內容。 謝謝！

Answer 1

您可以嘗試以下方法：

$( document ).ready(function() {    
    $('#cssmenu a').click(function (e) {
        e.preventDefault();

        var url = $(this).data('url'); // this is the correct syntax
        var pane = $(this);

        $('#tabs').load(url, function(result){ // load the content directly to #tabs     
            pane.tab('show'); // display the tab
        });   
    });
});

使用AJAX在div中加載下拉菜單內容

問題描述

1 個解決方案

解決方案1
1 已采納 2015-02-20 23:14:27

使用AJAX在div中加載下拉菜單內容

問題描述

1 個解決方案

解決方案1 1 已采納 2015-02-20 23:14:27

解決方案1
1 已采納 2015-02-20 23:14:27