2015-07-02 4 views
0

Так что мне нужно сделать что-то подобное - http://jsfiddle.net/3nk8x98g/1/ все объяснено в ссылке.Изменение элементов без обновления страницы

Что я использую Javascript или AJAX? А может, кто-то знает учебник или что-то там? Благодарю.

<body> 

    <div class="row"> 
     <a href="#">BUTTON1</a> 
     <a href="#">BUTTON2</a> 
     <a href="#">BUTTON3</a> 
    </div> 

    <div class="row background"> 
     Changing content, this content changes depending on which button you press. Without refreshing the page. 
    </div> 

</body> 
+0

* «Что я использую Javascript или AJAX?» * - Вы бы использовали Javascript, да. И, возможно, Ajax, который будет включать в себя запись Javascript-кода для создания запроса Ajax. – nnnnnn

ответ

0

Вы можете это сделать. Ajax предназначен для получения данных с сервера без обновления, но вы должны использовать javascript для динамического добавления этого содержимого в html.

$('a').on('click', function(){ 
    $('#changeingDiv').html('Changed Content'); 
} 
); 

Это просто, к примеру. Привяжите событие к кнопкам, а при щелчке измените содержимое div. Для различного контента на разных нажатиях кнопки вы можете добавить к ним идентификатор и соответствующим образом изменить контент.

http://jsfiddle.net/3nk8x98g/2/

0

AJAX это просто метод JavaScript, так же, вам нужно использовать AJAX и JavaScript. Посмотрите на это примеры того, как достичь этого, используя только JavaScript.

<body> 
    <div class="row"> 
    <a id="one" href="#">BUTTON1</a> 
    <a id="two" href="#">BUTTON2</a> 
    <a id="three" href="#">BUTTON3</a> 
    </div> 
    <div id="content" class="row background"> 
    Changing content, this content changes depending on which button you press. Without refreshing the page. 
    </div> 
    <script> 
    var one = document.getElementById("one"); 
    var two = document.getElementById("two"); 
    var three = document.getElementById("three"); 
    var content = document.getElementById("content"); 

    one.addEventListener("click", function() { 
     content.innerHTML = "One"; 
    }); 

    two.addEventListener("click", function() { 
     content.innerHTML = "Two"; 
    }); 

    threee.addEventListener("click", function() { 
     content.innerHTML = "Three"; 
    }); 
    </script> 
</body> 
Смежные вопросы