Page2選單載入外部檔案為局部文件內容

AJAX 即「Asynchronous JavaScript and XML」運用 JavaScript 與 XML 技術讓網頁內容非同步的更新, 也就是也可以局部內容更新, 指的是一套綜合了多項技術的瀏覽器端網頁開發技術, 使用 Ajax 的最大優點就是能在不更新整個頁面的前提下維護資料。

認識 AJAX @wiki
認識 AJAX @w3schools (英文版)
認識 AJAX @runoob (簡中版)

運用 jQuery 執行 AJAX 中最基本簡單的方法：load()
學習jQuery AJAX 的 load() 說明參考@jQuery
學習jQuery AJAX 的 load() 說明參考@w3schools (英文版)
學習jQuery AJAX 的 load() 說明參考@runoob (簡中版)

載入外部靜態網頁檔...... load()

取得標籤中的某個屬性...... attr('屬性名稱')

 

<ul id="page2menu">
    <li>
        <h2>PAGE1</h2>
        <ul>
            <li><a href="loadfile1-1.html">ITEM1</a></li>
            <li><a href="loadfile1-2.html">ITEM2</a></li>
            <li><a href="loadfile1-3.html">ITEM3</a></li>
            <li><a href="loadfile1-4.html">ITEM4</a></li>
            <li><a href="loadfile1-5.html">ITEM5</a></li>
        </ul>
    </li>
    .......................

 

<script>

//設計page2Menu項目點選載入外部檔案------------------------
$('#page2menu ul a').click(function(){
    //改變點選項目的class名稱及樣式
    $('#page2menu a').removeClass('current');
    $(this).addClass('current');

    //在右側內容區載入連結指定的檔案
    //取得目前點選項目中href這個屬性的內容(也就是連結的檔名)
    page2LoadFile = $(this).attr('href');   
    //alert(page2LoadFile);
    //在#page2content這個位置載入指定的外部檔案
    $('#page2content').load(page2LoadFile); 

    return false;  //不return回去,也就不會執行<a>的連結工作
});

</script>