Простой вопрос ajax onclick

Question

У меня проблемы с настройкой простого меню, которое отображает результаты в блоке div:

У меня есть список из 10 ссылок, которые ссылаются на файлы php на моем сервере, которые возвращают данные. Мне бы хотелось, чтобы, когда зритель нажимал на одну из ссылок, данные из файла php отображались в поле div на экране, а затем, когда он нажимал на другую ссылку, он отображал данные этого файла php в поле div (заменив предыдущий текст).

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

Спасибо !!

ОБНОВЛЕНИЕ: я в значительной степени провалил код JavaScript. Но вот основная идея для фреймворка:

 <div class="tabs">
        <ul class="tabNavigation" style="float:left; padding:1px;">
            <li><a href="#displayphpfile">Load phpfile1</a></li>
            <li><a href="#displayphpfile">Load phpfile2</a></li>
            <li><a href="#displayphpfile">Load phpfile3</a></li>
        </ul>
        <div id="displayphpfile">
            <p>Load phpfile1</p>
        </div>
    </div>

Answer 1

В jQuery есть специальный метод для этого: load ().

Я бы немного изменил ваш пример, поэтому ссылки на него указывают на файл php:

<div class="tabs">
    <ul class="tabNavigation" style="float:left; padding:1px;">
        <li><a href="phpfile1.php">Load phpfile1</a></li>
        <li><a href="phpfile2.php">Load phpfile2</a></li>
        <li><a href="phpfile3.php">Load phpfile3</a></li>
    </ul>
    <div id="displayphpfile">
        <p>Load phpfile1</p>
    </div>
</div>

Тогда код очень прост:

$(document).ready(function() {
   $(".tabNavigation a").click(function() {
      $("#displayphpfile").load($(this).attr("href"));

      return false;
   });
});

Answer 2

Я не проверял это, но это близко к тому, что вы хотите?

<script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function() {
            var file = $(this).text().toLowerCase() + '.php';
            $.ajax({
                url:file,
                cache:false,
                success: function(response) {
                    $('#data_goes_here').html(response);
                }
            });
            return false;
        });
    });
</script>
<ol>
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a>
    <li><a href="#">Baz</a></li>
</ol>

<div id="data_goes_here"></div>

Answer 3

Bipedal Shark вызывает документ. Уже внутри элемента click!

Должно быть:

<script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function() {
            var file = $(this).text().toLowerCase() + '.php';
            $.ajax({
                    url:file,
                    cache:false,
                    success: function(response) {
                            $('#data_goes_here').html(response);
                    }
                });
            return false;
            });
        });
</script>

Но метод загрузки намного чище.