一个非常具有挑战性的界面技巧问题！恳请高手相助！

sighgirl 2005-11-18 01:08:03

大家先看演示： 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">

</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}

...全文

217 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

sighgirl 2005-11-22

打赏
举报

用以下函数解决了：

<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>

ljlyy 2005-11-18

打赏
举报

学习！

lisoon 2005-11-18

打赏
举报

這是個最简单的例子。
<script>
function show()
{
var url="test.asp";
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open('post', url, false);
xmlhttp.send();
document.getElementById("show").innerHTML=xmlhttp.responseText;
}
</script>
<div id="show"></div><input type="button" value="show it" onClick="show()">

你在test.asp输出点东西看看。

sighgirl 2005-11-18