一个非常具有挑战性的界面技巧问题！恳请高手相助！谢谢！
大家先看演示： http://www.playball.com.cn/temp/test.asp
我想实现的是：点击 B列或C列的链接，直接跳转到我想到的页面中比如D列，而目前我点B列的链接后它是默认跳到A列的，因为在代码中我设置了样式：style="DISPLAY: block"，因为等于刷新了一次页面，所以想问问大家有没有JS的脚本可以控制一下跳转路径！
解释一下这么做的目的：因为在B和C列里都是动态读出数据并且分页显示的，如果在B列里点击“下一页”，那么页面肯定会刷新一次，所以总不可能让用户每点一次都把鼠标从A列移到B列来看结果吧
不知道大家是否能理解我的意思，本人愚笨还望海涵～ ,先谢过了！
以下附上代码(test.asp,menu.css)：
*********** test.asp **************
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.style1 {font-size: 24px}
-->
</style>
</head>
<link type="text/css" rel="stylesheet" href="menu.css" >
<body bgcolor="#FFFFFF">
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0"> <tr>
<!-- 菜单定义开始 -->
<script language="javascript">
function secCard(n)
{
for(i=0;i<secTable.cells.length;i++)
secTable.cells[i].className="cardNormal";
secTable.cells[n].className="cardSelected";
for(i=1;i<secTable.cells.length;i=i+2)
secTable.cells[i].className="cardSpace";
secTable.cells[n+1].className="cardSpaceLeft";
secTable.cells[5].className="cardSpaceLast";
}
function secBoard(n)
{
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="";
}
</script>
<td><TABLE width="100%" border=0 align="center" cellPadding=0 cellSpacing=0 class=cardFont id=secTable>
<TBODY>
<TR>
<TD width="74" align="center" class="cardSelected" style="padding:3 0 0 0" onMouseOver="secCard(0);secBoard(0);">A列</TD>
<TD width="7" height="30" class="cardSpace"> </TD>
<TD width="74" align="center" class="cardNormal" style="padding:3 0 0 0" onMouseOver="secCard(2);secBoard(1);">B列</TD>
<TD width="7" height="30" class="cardSpace"> </TD>
<TD width="74" align="center" class="cardNormal" style="padding:3 0 0 0" onMouseOver="secCard(4);secBoard(2);">C列</TD>
<TD width="7" height="30" class="cardSpace"> </TD>
<TD width="74" align="center" class="cardNormal" style="padding:3 0 0 0" onMouseOver="secCard(6);secBoard(3);">D列</TD>
<TD width="7" height="30" class="cardSpace"> </TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<tr>
<td>
<TABLE width="100%" height=150 border="0" align="center" cellPadding="5" cellSpacing="0" class="boardMain" id="mainTable">
<TBODY style="DISPLAY: block">
<TR>
<TD align="left" vAlign="middle">
<table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
</tr>
</table>
<a href="test.asp">点击返回A列</a> <span class="style1">AAAAAAAAAAAAAAAAAAAA</span> </TD>
</TR>
</TBODY>
<TBODY style="DISPLAY: none">
<TR>
<TD align="left" vAlign="middle">
<table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
</tr>
</table>
<a href="test.asp">点击返回B列</a> <span class="style1">BBBBBBBBBBBBBBBBBBBB</span> </TD>
</TR>
</TBODY>
<TBODY style="DISPLAY: none">
<TR>
<TD align="left" vAlign="middle">
<table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
</tr>
</table>
<a href="test.asp">点击返回C列</a> <span class="style1">CCCCCCCCCCCCCCCCCCCC</span> </TD>
</TR>
</TBODY>
<TBODY style="DISPLAY: none">
<TR>
<TD align="left" vAlign="middle">
<table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
</tr>
</table>
<a href="test.asp">点击返回D列</a> <span class="style1">DDDDDDDDDDDDDDDDDDD </span></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TABLE>
</body>
</html>
************* menu.css ********************
A:link {COLOR: #0000cc; TEXT-DECORATION: underline}
A:visited {COLOR: #551a8b; TEXT-DECORATION: underline}
A:active{COLOR: #ff0000; TEXT-DECORATION: none}
A:hover {COLOR: #ff0000; TEXT-DECORATION: underline}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #ffffff;
color: #000000;
font-size: 12px;
}
td{
font-size:12px;
line-height: 150%;
}
.white {color: #ffffff}
.cardNormal {
CURSOR: hand;
COLOR: #000000;
font-size:12px;
BACKGROUND-COLOR: #FFFFFF;
border-top: 1px solid #0A6CCE;
border-right: 1px solid #0A6CCE;
border-bottom: 1px solid #0A6CCE;
border-left: 1px solid #0A6CCE;
}
.cardSelected {
BORDER-left: 1px solid #0A6CCE;
BORDER-RIGHT: 1px solid #0A6CCE;
BORDER-TOP: 1px solid #0A6CCE;
FONT-WEIGHT: normal;
CURSOR: hand;
COLOR: #000000;
font-size:12px;
BACKGROUND-COLOR: #E1EFFD;
}
.boardMain {
BORDER-RIGHT: 1px solid #dbe9fd;
BORDER-LEFT: 1px solid #dbe9fd;
COLOR: #F1AB65;
LINE-HEIGHT:200%;
BORDER-BOTTOM:1px solid #0A6CCE;
BORDER-left: 1px solid #0A6CCE;
BORDER-RIGHT: 1px solid #0A6CCE;
BACKGROUND-COLOR:#E1EFFD;
}
.cardSpace {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
.cardSpaceLeft {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
.cardSpaceLast {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
A.nav1:link {COLOR: #000000; TEXT-DECORATION: none}
A.nav1:visited {COLOR: #000000; TEXT-DECORATION: none}
A.nav1:active,A.nav1:hover {COLOR:#000000; TEXT-DECORATION: none}
.erect{
COLOR: #ffffff;
WRITING-MODE: tb-rl;
TEXT-ALIGN:left;
letter-spacing:2px;
}
A.nav:link {COLOR: #FFFFFF; TEXT-DECORATION: none}
A.nav:visited {COLOR: #FFFFFF; TEXT-DECORATION: none}
A.nav:active{COLOR: #FFFF00; TEXT-DECORATION: none}
A.nav:hover {COLOR: #FFFF00; TEXT-DECORATION: none}
问题点数：100、回复次数：9Top
1 楼migichen（双启科技 hotmy.com【QQ群:7812131 asp.net C#】）回复于 2005-11-18 02:12:56 得分 40
修改 连接
<a href="test.asp?col=a">点击返回A列</a>
<a href="test.asp?col=b">点击返回B列</a>
<a href="test.asp?col=c">点击返回C列</a>
<a href="test.asp?col=d">点击返回D列</a>
然后再</body>前加入如下代码如果我没理解错这样就可以实现你的要求：
<script>
<%
if not isempty(request("col")) then
Select Case request("col")
Case "a" response.Write("secCard(0);secBoard(0);")
Case "b" response.Write("secCard(2);secBoard(1);")
Case "c" response.Write("secCard(4);secBoard(2);")
Case "d" response.Write("secCard(6);secBoard(3);")
End Select
end if
%>
</script>Top
2 楼yaozhg（网站开发架构师）回复于 2005-11-18 02:32:05 得分 40
一点点明白。。先象楼上说的传值，
超连接的时候，加上参数
比如点击之后?p=a或p=b这样的参数，
在另一页面读取p值，得到a或b这样的值，之后就能在js里修改，让相应的先显示。
比如读取到p=b，那就是说之前用户选了B的，之后：
在a表那里加上
<%if request("p")="" or request("p")="a" then%>
<TBODY style="DISPLAY: none">
<%end if%>
这样a就会被隐藏起来，
然后B那里默认是加了<TBODY style="DISPLAY: none">的，就写成
<%if request("p")="b" then%>
<TBODY style="DISPLAY: ">
<%else%>
<TBODY style="DISPLAY: none">
<%end if%>
Top
3 楼HAVENT（夜雨流星℡）回复于 2005-11-18 08:53:43 得分 5
使用onMouseOver我不喜欢，还是用鼠标点击事件感觉好点，不然随便动动鼠标就切换内容了，很不爽
http://www.yiqifei.com/
你不妨看看这个，设计的蛮好看的Top
4 楼caicaibao（菜菜（包））回复于 2005-11-18 09:17:53 得分 5
你传个参数进去，等加载页面后在运行一个JavaScript不行吗？Top
5 楼sighgirl（人心如水，淡如菊）回复于 2005-11-18 09:28:43 得分 0
谢谢楼上各位朋友，我回去试一试先
to HAVENT(♂夜雨流星♂) ：这个样式的源码能提供我么？ 谢谢了！Top
6 楼sighgirl（人心如水，淡如菊）回复于 2005-11-18 10:22:43 得分 0
我试了一下，都不能达到很完美的效果，麻烦大伙再想想办法啊，上面的代码只要原封不动的COPY到本机上就可以试运行了，很简单的。Top
7 楼goody9807（http://goody9807.cnblogs.com）回复于 2005-11-18 12:26:58 得分 5
<script language=javascript>
window.location.href='your.aspx';
</script>
Top
8 楼cuike519（I will be back!）回复于 2005-11-18 14:24:42 得分 5
这是因为页面没用保存状态，在提交以后会初试成原来的样子。
你可以考虑将
<a href="test.asp">点击返回B列</a>
修改成：
<a href="test.asp?tabid=b">点击返回B列</a>
以此类推。
在asp里面判断tabid的值，在body的onload里面设置点击的页签即可（调用一次secCard(2);secBoard(1);），当然这个方法需要封装一下在能方便调用。
Top
9 楼sighgirl（人心如水，淡如菊）回复于 2005-11-22 14:27:23 得分 0
问题解决了! 谢谢大家的关注
<script>
window.onload=function()
{
document.location.search.search(/t=(.+?)\b/);
switch(RegExp.$1)
{
case "a":secCard(0);secBoard(0);break;
case "b":secCard(2);secBoard(1);break;
case "c":secCard(4);secBoard(2);break;
case "d":secCard(6);secBoard(3);break;
}
}
</script>
Top
