แก้อย่างไร เมื่อกดรีเฟชแล้วมันชอบเปลี่ยนหน้า
<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 /> <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>
#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 /> <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>
ลองอ่าน บทอื่นๆ บนเว็บดูสิครับ มีคำแนะนำอยู่
วิธีคิดง่ายๆ คือ
อย่างแรก ที่ page1.php และ page2.php ให้เก็บ cookie ไว้ ถ้ามีการเปิดดู โดยเก็บไว้ที่ต่าเดียวกัน
อย่างที่ 2 ให้อ่าน cookie ที่เก็บไว้ใส่ dotabclik ซึ่งเป้นฟังก์ชั่นที่ใช้โหลดในตอน refresh หรือ load ครั้งแรก
หลักการก็ง่ายๆแค่นี้แหละครับ
พอใส่ฟังก์ชัน setcookie แล้ว class selected ไม่งานครับ