<!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 runat="server">
<title>jQuery+CSS实现竖向漂亮的滑动导航</title>
<style type="text/css">
td,a,body{font-size:9pt;}
/*--选中的情况下*/
.current
{
cursor:pointer;
background-color:#E47F2C;
border-right:solid 1px #E47F2C;
border-bottom:solid 1px #333333;
border-left:solid 1px #FCD93A;
border-top:solid 1px #FCD93A;
color:#000000
}
/*未选中时边框颜色*/
.nofocus
{
cursor:pointer;
background:#A6401A;
border-right:solid 1px #eeeeee;
border-bottom:solid 1px #333333;
border-left:solid 1px #798ACC;
border-top:solid 1px #E47F2C;
color:#FFFFFF
}
.rightTable
{
background-color:#E47F2C;
border-right:solid 1px #888888;
border-bottom:solid 1px #555555;
border-left:0px;
border-top:solid 1px #C8CEEA;
}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var contentArray = new Array();
contentArray[0] = "七星彩";
contentArray[1] = "福彩";
contentArray[2] = "篮球彩";
contentArray[3] = "足球彩";
function ChangeFocus(obj) {
var table = $("#leftTable").find("tr").find("td");
for (var i = 0; i < table.length; i++) {
if (table.eq(i)[0] == obj) {
table.eq(i)[0].className = "current";
$("#content").html(contentArray[i]);
}
else
table.eq(i)[0].className = "nofocus";
}
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#6271B1">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="84" id="leftTable">
<tr><td height="20" align="center" class="current" onmousemove="ChangeFocus(this)">七星彩</td></tr>
<tr><td height="20" align="center" class="nofocus" onmousemove="ChangeFocus(this)">福彩</td></tr>
<tr><td height="20" align="center" class="nofocus" onmousemove="ChangeFocus(this)">篮球彩</td></tr>
<tr><td height="20" align="center" class="nofocus" onmousemove="ChangeFocus(this)">足球彩</td></tr>
</table>
</td>
<td>
<table width="303" border="0" cellpadding="0" cellspacing="0" class="rightTable">
<tr>
<td valign="top" id="content" height="86"><p> </p></td>
</tr>
</table>
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">ChangeFocus($("#leftTable").find("tr").find("td").eq(0)[0])</script>
</body></html>
