Простой вопрос JQuery AJAX

Question

У меня есть такое меню, но разметка не должна оставаться такой.

<div id="menu">
 <ul>
  <li><a href="#item1">Item 1</a></li>
   <ul>
   <li><a href="#subitem1">Subitem 1</a></li>
   </ul>
  <li><a href="#item2">Item 2</a></li>
 </ul>
</div>

И каждый раз, когда нажимается один из этих пунктов меню, я хочу загрузить разный контент в div - назовем это # ​​content.

$(document).ready(function() {
  $('#menu li').click(function(){
      $('#content').load('content.txt');
  });
});

Теперь, как мне передать, какую страницу контента я хочу загрузить в #content? Заранее спасибо!

Answer 1

Предотвратите переход клика на страницу с помощью метода warnDefault () события, используйте ссылку href, которая фактически переходит на эту страницу, загруженную в div #content.

$(document).ready(function() {
    $('#menu a').click(function(e){
        $('#content').load($(this).attr('href'));
        e.preventDefault();
    });
});


<div id="menu">
 <ul>
  <li><a href="page1.html">Item 1</a></li>
   <ul>
   <li><a href="subpage1.html">Subitem 1</a></li>
   </ul>
  <li><a href="page2.html">Item 2</a></li>
 </ul>
</div>

Answer 2

Вы можете сделать это несколькими способами. По сути, вам нужно связать URL с каждым элементом <li>.

Чтобы назвать несколько способов, вы можете хранить их в массиве JavaScript, в кэше jQuery, т.е. $(selector).data, в скрытом вводе внутри каждого элемента <li>, в качестве атрибута элемента <li>.

Answer 3

Единственная проблема с решением joelpittets заключается в том, что он будет загружать ВСЕ содержимое другой страницы, которое может не соответствовать желаемому.Однако он не забыл отменить поведение по умолчанию при нажатии на ссылку ...

Answer 4

в сферах прогрессивного улучшения - ссылки должны указывать на другую страницу с соответствующим содержанием.

тогда вы можете загрузить не только все содержимое страницы в ваш div содержимого, но и указанный элемент. Поэтому, если для содержимого #content div на другой странице требуется что-то вроде:

$('#menu a').click(function(){
    $('#content').load($(this).attr('href') + ' #content');
});

должен сделать трюк.

Answer 5

Я бы использовал что-то вроде возможность вкладки jQuery UI , чтобы справиться с этим.Вероятно, он будет ухудшаться лучше.

Если вам нужно сделать это вручную, самый простой способ - добавить идентификатор или атрибут rel к якорям, а затем использовать его для определения страницы содержимого, которую вы хотите загрузить.

Вы можете использовать "$ (this) .attr ('blah');"в вашей функции для доступа к этим свойствам.