Question

我有这个小代码，允许用户在下拉菜单中单击，然后使用AJAX打开div中的内容。内容位于同一页面中，因此目标是将该内容div加载到另一个div中。问题是，当我加载内容时，它会加载页面本身（参见下面的打印）

HTML

<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='#' data-url="http://localhost/bioinformatica/Main_page/Quick_search.html#qhelp"><span>Project</span></a></li>
                <li class='last'><a href='#' data-url="#homePage> *"><span>Team</span></a></li>
             </ul>
          </li>
          <li class='last'><a href='#' data-url="http://localhost/bioinformatica/Main_page/Main_page%20(5)#cssmenu"><span>News</span></a></li>
          <li class='has-sub'><a href='#'><span>Search</span></a>
             <ul>
                <li><a href='#'><span>Quick Search</span></a></li>
                <li><a href='#'><span>Advanced Search</span></a></li>
                <li class='last'><a href='#'><span>Structure Search</span></a></li>
             </ul>
          </li>
          <li class='has-sub'><a href='#'><span>Tools</span></a>
             <ul>
                <li><a href='#'><span>NAMS</span></a></li>
                <li><a href='#'><span>Smiles Calculator</span></a></li>
                <li class='last'><a href='#'><span>Empty</span></a></li>
             </ul>
          </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>

<div id="all_divs">
  <div id="homePage"><p>HOME PAGE</p></div>
      <div id="biogPage"><p>BIOG PAGE</p></div>
      <div id="musicPage"><p>MUSIC PAGE</p></div>
      <div id="photosPage"><p>PHOTOS PAGE</p></div>
  </div>

  <script>$('#homePage,#biogPage, #musicPage, #photosPage, #shopPage').hide();</script>

的javascript

(function($) {

  $(document).ready(function() {
    $('#cssmenu ul ul li:odd').addClass('odd');
    $('#cssmenu ul ul li:even').addClass('even');

    $('#cssmenu > ul > li > a').click(function() {
      $('#cssmenu li').removeClass('active');
      $(this).closest('li').addClass('active');
      var checkElement = $(this).next();

      if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
      }

      if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#cssmenu ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
      }

      if ($(this).closest('li').find('ul').children().length == 0) {
        return true;
      } else {
        return false;
      }
    });
  });

})(jQuery);


//para abrir cada bootstrap tab com ajax
$(document).ready(function() {

  $('#tab_quick').load($('#tabs .active a').attr("data-url"), function(result) {
    $('.active a').tab('show');
  });

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

    var url = $(this).attr("data-url");
    var href = this.hash; /*vai buscar a parte do href que contem hash(#) , neste caso para o primeiro vai buscar #home*/
    var pane = $(this);

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

  });

});


$(document).ready(function() {

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

    var url = $(this).data('url');
    var pane = $(this);

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

});

当我点击菜单中的新闻时，它会加载完整的页面而不是div。当我点击关于 - >团队

时，也会发生这种情况

Answer 1

刚刚将data-url="http://localhost/bioinformatica/Main_page/Quick_search.html#qhelp"更改为

data-url="http://localhost/bioinformatica/Main_page/Quick_search.html #qhelp"

在同一页面的另一个div内加载div

1 个答案: