مشكلة معي في jQuery Ajax لم اجد لها حل

بسم الله الرحمن الرحيم

مرحبا شباب

مثلا انا لديي ملفيين

الملف الأول أسمه: 1.html

الملف الثاني اسمه: 2.html

ولدي ملف اسمه index.html

في الملف index.html لديي الكود التالي:

<li id="p1">Page1</li>
<li id="p2">Page2</li>

ولدي ملف jQuery: 

$(document).ready(function(){ $("#p1").click(function () { $.get("1.html", function (data) { $("#show").html(data); }); }); $("#p2").click(function () { $.get("2.html", function (data) { $("#show").html(data); }); });

});

المهم:

مثلا عند الضغط على الزر الأول P1

يقوم الكود بجلب محتوى الملف 1.html

والزر الثاني يقوم بجلب 2.html

ف مثلا عند جلب محتوى الملف الأول

يظهر لي في المتصفح:

Page1

Page2

Page 1

لكن الآن عند تحديث الصفحة

يرجع إلى الصفحة الإفتراضية بدون أي محتوى

يعني ترجع الصفحة فاضية

كيف أحل هذه المشكلة ؟؟