|
 |
| |
class seleted ไม่ทำงาน อยากได้ แบบว่า คลิกเปลี่ยนเมนู class selected ก็เลือกเมนูปัจุบัน refresh แล้วให้อยุ่หน้าปัจจุบัน ครับ |
| |
 |
|
|
 |
 |
|
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>[demo]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body {
margin:50px;
font-family:Tahoma, "MS Sans Serif";
font-size:8pt;
background-color:#CCC;
}
a:link {
color:maroon;
text-decoration:none;
}
a:visited {
color:maroon;
text-decoration:none;
}
a:hover {
color:#526AF9;
text-decoration:none;
}
#middle {
height:300px;
}
#left {
background-color:#FFCCCC;
width:100px;
height:100%;
float:left;
padding:5px;
}
#right {
background-color:#FFFFCC;
padding:5px;
height:100%;
float:left;
padding-left:10px;
}
li{list-style:none;}
ul li a.selected{color:#FF0000;}
</style>
<script language="javascript" type="text/javascript">
function Inint_AJAX() {
try {return new ActiveXObject("Msxml2.XMLHTTP");} catch(e){}
try {return new ActiveXObject("Microsoft.XMLHTTP");} catch(e){}
try {return new XMLHttpRequest();} catch(e) {}
alert("XMLHttpRequest not supported");
return null;
};
function doMenu(id, page) {
var ul = document.getElementById(id).parentNode
var lilist = ul.getElementsByTagName("a")
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();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
var data=req.responseText;
document.getElementById("right").innerHTML=data;
Set_Cookie( 'id' , page );
Set_Cookie( 'page' , page );
}
}
};
req.open("POST", page, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(null); //ส่งค่า
}
function Set_Cookie(name, value, expires, path, domain, secure){
var today=new Date();
today.setTime(today.getTime());
if(expires){
expires = expires*1000*60*60*24;
};
var expires_date = new Date(today.getTime() + (expires));
document.cookie = name + "=" +escape(value) +
((expires) ? ";expires=" + expires_date.toGMTString() : "") +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
((secure) ? ";secure" : "");
};
</script>
</head>
<body onload="doMenu('<?php echo ( isset( $_COOKIE[page] ) ) ? $_COOKIE[page] : '1'?>','<?php echo ( isset( $_COOKIE[page] ) ) ? $_COOKIE[page] : 'page1.php'?>')">
<div id="middle">
<div id="left">
<ul>
<li>[<a href=JavaScript:doMenu('1','page1.php'); id='1'>Page1</a>]</li>
<li>[<a href=JavaScript:doMenu('2','page2.php'); id='2'>Page2</a>]</li>
</ul>
</div>
<div id="right">result</div>
</div>
</body>
</html>
Tag : JavaScript, Ajax, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2011-09-29 17:40:13 |
By :
weaned |
View :
800 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ขอบคุณครับ
|
| |
|
|
| |
| Date :
2011-09-30 10:06:53 |
By :
weaned |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
