一个非常具有挑战性的界面技巧问题！恳请高手帮忙！
大家先看演示： 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、回复次数：11Top
1 楼moodboy1982（老鹰）回复于 2005-11-18 01:21:21 得分 0
一个贴子怎么发两次呀？Top
2 楼sighgirl（人心如水，淡如菊）回复于 2005-11-18 01:32:53 得分 0
我是在不同的板块发的啊，希望更多人能帮忙一下，谢谢了！Top
3 楼sighgirl（人心如水，淡如菊）回复于 2005-11-18 09:30:10 得分 0
顶顶顶！ 希望高手拔刀相助！Top
4 楼csdntzg（天生我菜）回复于 2005-11-18 09:49:24 得分 90
测试页面改成了htm的，再改回来就行了
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
window.onload=function(){
switch(document.location.search){
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>
<style type="text/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}-->
</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.htm?a">点击返回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.htm?b">点击返回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.htm?c">点击返回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.htm?d">点击返回D列</a> <span class="style1">DDDDDDDDDDDDDDDDDDD </span></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TABLE>
</body>
</html>
Top
5 楼aolon（）回复于 2005-11-18 10:59:00 得分 0
选项卡，又见选项卡Top
6 楼sighgirl（人心如水，淡如菊）回复于 2005-11-18 11:04:05 得分 0
to : csdntzg(天生我菜) ( )
谢谢你的帮助，现在还有问题，我的href="test.asp?aaa=1&bbb=<%=xxx%>" 这个链接是动态的
而这段代码CASE语句是“等于”，能不能把它改成包含于，类似于：indexOf()
也就是说document.location.search属性如果发现参数里含有 col=a 这个就执行，而不是要全部匹配才执行
<script>
window.onload=function(){
switch(document.location.search){
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
7 楼shuangren（候鸟）回复于 2005-11-18 11:28:58 得分 10
同意csdntzg(天生我菜)
把"点击返回?列"的链接改成
test.asp?col=?
格式，点击链接后把选项通过地址参数传到新页面中
再用脚本根据参数选择显示选项卡Top
8 楼sighgirl（人心如水，淡如菊）回复于 2005-11-18 11:32:20 得分 0
GZTop
9 楼csdntzg（天生我菜）回复于 2005-11-18 13:28:40 得分 0
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<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>
<style type="text/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}-->
</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.htm?x=xx&test=a">点击返回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.htm?x=xx&test=b">点击返回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.htm?test=c&x=xx">点击返回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.htm?test=d&x=xx">点击返回D列</a> <span class="style1">DDDDDDDDDDDDDDDDDDD </span></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TABLE>
</body>
</html>Top
10 楼sighgirl（人心如水，淡如菊）回复于 2005-11-18 14:09:40 得分 0
问题已解决！非常感谢csdntzg(天生我菜)Top
11 楼sighgirl（人心如水，淡如菊）回复于 2005-11-22 14:25:28 得分 0
ok 结贴！Top
