У меня возникли трудности с настройкой простого меню, которое отображает результаты в поле div:
У меня есть список из 10 ссылок, которые ссылаются на php-файлы на моем сервере, которые возвращают данные. Мне бы хотелось, чтобы, когда зритель нажимает на одну из ссылок, данные из файла php будут отображаться в поле div на экране, а затем, когда он нажимает на другую ссылку, он отображает данные из этого файла php в поле div (заменив предыдущий текст).
Я знаю, что это довольно просто, но я не могу заставить его работать. Я использую jQuery и хочу знать, есть ли у вас какие-либо быстрые решения.
Благодаря!!
UPDATE: Я сильно исказил код 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> У jQuery есть специальный метод для этого: load ().
Я бы немного изменил ваш пример, поэтому ссылки hrefs ссылок указывают на файл 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; }); });
Я не тестировал это, но насколько это близко к тому, что вы хотите?
<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>
Бипадальская акула вызывает документ. Уже внутри элемента щелчка!
Должен быть:
<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>
Но метод загрузки намного более чистый.