GORAGOD.com

<style type="text/css">
#tab {
  display:block;
  width:400px; /* ความกว้างของ Tab */
}
#content_tab {
  border:1px solid red;
  display:block;
  height:150px; /* ความสูงของ Tab */
  overflow:auto; /* แสดง scrollbar */
  padding:2px;
  background:#ffffff; /* สีพื้น */
  font-size:100%;
}
#tab ul {
  list-style-type:none;
  float:right; /* Tab ชิดขวา */
}
#tab li {
  display:inline;
  position:relative;
}
#tab li a {
  font-weight:bold; /* ตัวอักษรหนา */
  text-decoration:none; /* ไม่ขีดเส้นใต้ */
  color:#cccccc; /* สีตัวอักษร */
  background:#f0f0f0; /* สีพื้นตอนปกติ */
  border-bottom:4px solid #cccccc; /* สีกรอบด้านล่างตอนปกติ */
  padding:0 20px 3px 20px;
}
#tab li a:hover {
  color:red; /* สีตัวอักษรเมื่อเมาส์อยู่บน */
  border-bottom:4px solid red; /* สีกรอบด้านล่างเมื่อเมาส์อยู่บน */
  background:#f4f4f4; /* สีพื้นเมื่อเมาส์อยู่บน */
}
#tab li.selected a { /* เมื่อ Tab ถูกเลือก */
  color:red;
  border-bottom:4px solid red;
  border-left:1px solid red;
  border-right:1px solid red;
  padding-top:1px; /* เลื่อน Tab ขี้นเพื่อลบกรอบ */
  background:#ffffff;
}

</style>
<script type="text/javascript">
function Inint_AJAX() {
   try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
   try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
   alert("XMLHttpRequest not supported")
   return null
}

function dotabclick(id, page) {
  document.getElementById('content_tab').innerHTML = '<br />&nbsp;&nbsp;<img src="../images/wait3.gif" alt="loading" /> loading...' //รูปรอโหลด
  var ul = document.getElementById(id).parentNode
  var lilist = ul.getElementsByTagName("li")
  for (var n = 0; n < lilist.length; n++) {
    if (lilist[n].id == id) lilist[n].className="selected"
    else lilist[n].className=""
  }
  var req = Inint_AJAX() //สร้าง Object
  req.open('GET', page, true)
  req.onreadystatechange = function() { //เหตุการณ์เมื่อมีการตอบกลับ
    if (req.readyState == 4) {
      if (req.status == 200) { //ได้รับการตอบกลับเรียบร้อย
        document.getElementById("content_tab").innerHTML = req.responseText //ข้อความที่ได้รับการตอบกลับ
      }
    }
  }
  req.send(null) //ทำการส่ง
}
// สำหรับการเรียกครั้งแรกเมื่อโหลดหน้าเพจ
window.onload = function() {
    dotabclick('tab1', 'ajax/page1.php');
};
</script>
<div id="tab">
  <div id="content_tab"></div>
  <ul>
    <li id="tab1"><a href="javascript:dotabclick('tab1', 'ajax/page1.php')" title="แสดงตัวอย่าง">Preview.</a></li>
    <li id="tab2"><a href="javascript:dotabclick('tab2', 'ajax/page2.php')" title="แก้ไข HTML">HTML.</a></li>
  </ul>
</div>