Менять контент страницы, не обновляя ее

У меня есть Ландинг Пэйдж, разделенный на две колонны, левая сторона - NavBar, где есть аккордеон со свойствами в продажу (это Веб строительной фирмы), и в правая сторона я хочу, чтобы он стал display информации о свойстве (изображения, детали продажи, кнопки котировки и т.д....). То, что я хочу, состоит, в том, чтобы кликнув в свойстве аккордеона, прямая часть стала отвечающей совремнным требованиям с информацией о свойстве в вопросе. Сейчас я должен осветлять что-то: У Веба есть index.php, где каждая часть страницы названа одним require (NavBar, body, и footer они интегрированы в индекс посредством функции require PHP) что-то подобное MVC, но не такой сложный.

Сейчас, аккордеон находится в NavBar благодаря одному require, и свойства в свою очередь, они находятся в NavBar благодаря одному require что называет их с файла propiedades.tpl.

introducir la descripción de la imagen aquí

Изображение для того, чтобы он обучился похожая на страницу.

<html>
    <body id="top">
        <?php require 'header.php'; ?>
        <!-- Main --> 
        <?php require 'body.html'; ?>

        <!-- Footer -->
        <?php require 'footer.html'; ?>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="accordion/js/jquery.accordion.js"></script>
            <script src="assets/js/jquery.poptrox.min.js"></script>
            <script src="assets/js/skel.min.js"></script>
            <script src="assets/js/util.js"></script>
            <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
            <script src="assets/js/main.js"></script>
            <script>

            $('.accordion').accordion({
                "transitionSpeed": 400,
                "singleOpen": false
            });         
            </script>
    </body>
</html>

Код индекса для того, чтобы они увидели, как расположена в порядке страница.

<html>
    <head>
        <link rel="stylesheet" href="assets/css/scroll.css" />
    </head>
    <body id="top">
        <!-- Header -->
        <header id="header">
            <div class="inner">
                <a href="#" class="image avatar"><img src="images/avatar.jpg" alt="" /></a>
                <h2>Bienvenido</h2>
            </div>
            <div class="scroll">
                <div>
                    <p><strong>Apartamentos</strong></p>
                    <?php require 'aptos.tpl'; ?>
                </div>
                <div>
                <p><strong>Casas</strong></p>
                    <?php require 'casas.tpl'; ?>
                </div>
            </div>
        </header>
    </body>
</html>

Код NavBar для того, чтобы они видели (Да, NavBar называется header.php)

Он считал подумавшим делать это с AJAX посредством onClick="", но я не знаю, как делать это. Я хочу, чтобы, нажав на свойство в NavBar левой стороны, потом стала отвечающей совремнным требованиям прямая часть страницы для того, чтобы он сделал display информации о свойстве.

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

1
задан 18.01.2017, 03:09
0 ответов

Видя, что ты используешь JQuery, я даю тебе какие-то отпечатки:

  • В событии click из меню, которое соответствует, ты был бы должен делать вызов ajax, чтобы возвращать вид, который ты хочешь загрузить в правую сторону: http://api.jquery.com/jQuery.ajax/
  • Как только у тебя есть контент ты это добавляешь к панели правой стороны: http://api.jquery.com/html/

Место все объединенный смогло бы остается нечто похожее:

    $.ajax({
        url : "template1.htm",
        dataType: "text",
        success : function (data) {
            $(".paneldecontenido").html(data);
        }
    });

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

Я надеюсь помочь тебе.

1
ответ дан 03.12.2019, 17:38
  • 1
    Хорошо! функционируй чуда, спасибо Фернандо! но я gustarí в который, кликнув в другой " propiedad" сделайте себе чистоту предыдущего и станьте снова display, потому что если не irí в нагромождая все. Конечно код остался таким: function cargarDoc() { $.ajax({ url : "footer.html", dataType: "text", success : function (data) { $(".1").html(data); } }); } –  18.01.2017, 18:37
  • 2
    Пойди уже sta оказывается, что он не нагромождается, так как это совсем, уже функционируй, тысячи спасибо человек! –  18.01.2017, 18:57
  • 3
    Привет @NicolasEcheverry! Если ответ solucionó твой вопрос пожалуйста пометь ее как правильный ответ así мы помогаем улучшать сообщество. Привет! –  18.01.2017, 19:30
  • 4
    Николас, я радуюсь тому, что в конце концов ты решил проблему. –  19.01.2017, 09:24

Теги

Похожие вопросы