Как загрузить отдельную страницу html в div на клик?

Я действительно новичок в javascript и jquery, но я пытаюсь создать страницу, которая позволит пользователю щелкнуть название страны, и информация для этой страны будет загружаться в div из отдельного файла html.Как загрузить отдельную страницу html в div на клик?

Else, где я нашел этот код, который работает хорошо для этого, используя .click(function) на <a> тэгом:

var $j = jQuery.noConflict(); 

$j(document).ready(function(){ 
    $j("a").click(function(){ 
     $j.ajax({ 
      url: $j(this).attr("href"), 
      success: function(response) { 
       $j("#partnerContent").html(response); 
      } 
     }); 
     return false; 
    }); 
});

Вот основной HTML:

<div id="contentcontain"> 
    <div class="partnercol1"> 
     <div class="container"> 
      <div id="menu" class="btn-group"> 
       <button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown">International Sales <span class="caret"></span></button> 
       <ul class="dropdown-menu scrollable-menu" role="menu"> 
        <li><a href="partners/belgium.html">Belgium</a></li> 
        <li><a href="partners/brunei.html">Brunei</a></li> 
        <li><a href="partners/bulgaria.html">Bulgaria</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="partnercol2"> 
     <div id="partnerContent"></div> 
    </div>

Однако теперь каждый <a> тег на странице (включая верхнее и нижнее меню) загружает их href в div при нажатии. Как настроить таргетинг только на div, содержащий меню состояния, для работы с этой функцией?

источник

2016-01-11 tclark

Сделать селектор для элементов вы Прикрепление события более ограничительный характер:

// this selects all the anchors below the items with ID menu 
$j("#menu a").click(function() { 
    ... 
});

источник

2016-01-11 14:35:50

спасибо. Я закончил тем, что использовал это решение, поскольку он работал лучше всего, и мне было легко понять. Мне нужно многому научиться, поэтому спасибо за помощь. – tclark

в вашем HTML, говоря:

<ul class="dropdown-menu scrollable-menu" role="menu"> 
    <li><a class="menu-item" href="partners/belgium.html">Belgium</a></li> 
    <li><a class="menu-item" href="partners/brunei.html">Brunei</a></li> 
    <li><a class="menu-item" href="partners/bulgaria.html">Bulgaria</a></li> 
</ul>

А в вашем JavaScript

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 
$j(".menu-item").click(function(){ 
$j.ajax({ 
    url: $j(this).attr("href"), 
    success: function(response) { 
    $j("#partnerContent").html(response); 
    } 
}); 
return false; 
}); 
});

источник

2016-01-11 14:37:49

Вы загружаете всю страницу html, а это означает, что вы загружаете

<html>...</html>

, а затем начинку, что во всей своей полноте в вашу страницу, это означает, что вы будете в конечном итоге иметь

<html> 
    .... 
    <html>...</html> 
    ... 
</html>

который НЕ является действительным. Если вы пытаетесь заменить содержимое одного <div> на своей странице, то либо вы получите эту целую страницу в var, либо вырезаете фрагмент, который вы хотите, либо получите jquery fetch/insert ТОЛЬКО часть, которую вы хотите, например.

$('#div_to_replace').load('source_of_new.html #id_of_element_to_use_for_replacement');

Обратите внимание на второй #... аргумент в .load() вызова. Это сообщает jquery игнорировать все на странице EXCEPT для указанного элемента/ID. Только содержимое этого идентификатора будет заполнено #div_to_replace.

источник

2016-01-11 14:40:01

Как загрузить отдельную страницу html в div на клик?

ответ

Смежные вопросы