Podmiana całej zawartości div po kliknięciu w dany odnośnik

Question

Dla przykładu mam kod 

<div class="test">Zawartość diva o klasie test</div>

oraz gdzieś w oddali odnośnik <a href="#" id="news">Nowości</a>

Chcę uzyskać efekt że po kliknięciu w "Nowości" zawartość <div class="test"> zostanie zastąpiona zawartością z jakiegoś pliku tekstowego

Znalazłem coś takiego

 

 <script>
            function fn1(){
                document.getElementById('div1').innerHTML = "to zostanie wstawione zamiast słowa test";
            }
        </script>

 <div id="div1" onclick="fn1()">TEST</a>

jak to zamienić na  load(); ? 

Comments

A gotowe rozwiazanie ? 

Answer 1

load() to metoda jquery związana  z Ajaxem. Ładuje ona określoną zawartość do wskazanego elementu strony.

Jeżeli użyjesz jquery to:

1.Użyj funkcji, która czeka na załadowanie DOM ready

2. Ustaw nasłuchiwanie kliknięcia na elemencie przycisku click lub  on

3. Załaduj treść do odpowiedniego kontenera  load

Comments

4. Zmień adres strony przy pomocy History API.

Answer 2

Polecałbym raczej rozwiązanie typu https://github.com/defunkt/jquery-pjax

Wczytanie nowej zawartości powinno być równoważne przejściu na daną podstronę. Powinien zatem zmienić się adres. Tak samo powinny być poprawne linki, jedynie obsłużone przez JS.