一个很奇怪的菜单刷新的问题
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="qikan.aspx.cs" Inherits="qikan %>
<!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 id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<title>电子期刊</title>
<style type="text/css">
a{TEXT-DECORATION:none; color:White}
a:hover{TEXT-DECORATION:underline; color:White}
.style2
{
width: 970px;
text-align: center;
}
.style4
{
text-align: center;
}
.style5
{
width: 190px;
}
.style6
{
width: 700px;
}
td{ cursor: hand; font-family: Tahoma; color:Black; font-size: 11pt }
.classMenu{ color:White; background-color: #5D7CB5; border-bottom:solid 1px white}
.style7
{
color: White;
background-color: #5D7CB5;
border-bottom: solid 1px white;
width: 180px;
}
.style8
{
width: 180px;
height: 20px;
}
.style9
{
width: 970px;
text-align: center;
height: 166px;
}
</style>
</head>
<body bgcolor="#cdc7c7">
<script type="text/javascript" language="javascript">
function TestBlack(TagName){
var obj = document.getElementById(TagName);
if(obj.style.display==""){
obj.style.display = "none";
}else{
obj.style.display = "";
}
}
function High()
{
if(event.srcElement.className=="classItem")
{
event.srcElement.style.background="336699"
event.srcElement.style.color="white"
}
}
function Low()
{
if(event.srcElement.className=="classItem")
{
event.srcElement.style.background="#7593C7"
event.srcElement.style.color="white"
}
}
function InitFrameHeight(){
var iframe = document.getElementById("mainFrame");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("InitFrameHeight()", 100);
</script>
<form id="form1" runat="server">
<center>
<div style="background-image: url('App_Themes/工作组副页(上).jpg'); background-repeat:no-repeat; background-position:center"
class="style9">
<div style="text-align:left; padding-left: 46px; margin-top: 0px; height:97px ">
</div>
<div style="text-align:left; padding-left: 46px; margin-top: 0px; height: 30px;">
<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td height="25" align="center" width="1"></td>
<td style=" width:140px" class="style4">
<asp:LinkButton ID="LinkButton1" runat="server" Font-Names="微软雅黑"
ForeColor="Silver" onclick="LinkButton1_Click" Font-Size="Medium">首页</asp:LinkButton>
</td>
<td style="color:Silver">|</td>
<td style=" width:140px" class="style4">
<asp:LinkButton ID="LinkButton2" runat="server" Font-Names="微软雅黑"
ForeColor="Silver" onclick="LinkButton2_Click" Font-Size="Medium">工作组介绍</asp:LinkButton>
</td>
<td style="color:Silver">|</td>
<td style=" width:140px" class="style4">
<asp:LinkButton ID="LinkButton3" runat="server" Font-Names="微软雅黑"
ForeColor="Silver" onclick="LinkButton3_Click" Font-Size="Medium">成果展示</asp:LinkButton>
</td>
<td style="color:Silver">|</td>
<td style=" width:140px" class="style4">
<asp:LinkButton ID="LinkButton4" runat="server" Font-Names="微软雅黑"
ForeColor="Silver" onclick="LinkButton4_Click" Font-Size="Medium">电子期刊</asp:LinkButton>
</td>
<td style="color:Silver">|</td>
<td style=" width:140px" class="style4">
<asp:LinkButton ID="LinkButton5" runat="server" Font-Names="微软雅黑"
ForeColor="Silver" onclick="LinkButton5_Click" Font-Size="Medium">留言</asp:LinkButton>
</td>
<td ></td>
<td width="230" colspan="0" rowspan="1" >
<asp:TextBox ID="TextBox1" runat="server" BorderStyle="None" Height="16px"
Width="154px" BorderWidth="0px"></asp:TextBox>
<asp:ImageButton ID="ImageButton1" runat="server" Height="13px" Width="13px"
ImageUrl="~/App_Themes/SkinFile/ss.png" onclick="ImageButton1_Click" />
</td>
</tr>
</table>
</div>
</div>
<div style="background-image: url('App_Themes/工作组副页(中).jpg');background-position:center; width:970px " onload="Javascript:SetWinHeight(this)">
<div style="text-align:center; padding-left: 40px;*padding-left: 0px">
<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td class="style5" style="vertical-align:top">
<table border="0" width="180" style=" text-align:center"
cellspacing="0" cellpadding="0">
<tr>
<td class="style4">
<div style="background-image: url('App_Themes/导航上.jpg'); width: 180px; height:20px; border-bottom:solid 1px white"></div>
<div class="style7" ><a href='文章/期刊资料/投稿指南.htm' target="mainFrame">投稿指南</a></div>
<div class="style7" ><a href='文章/期刊资料/编委.htm' target="mainFrame">编委</a></div>
<div class="style7" ><a href='文章/期刊资料/编辑人员.html' target="mainFrame">编辑人员</a></div>
--------------------编程问答--------------------
<div class="style7" onclick="TestBlack("Div1");changename()">2008年期刊内容</div>
<div onmouseover="High()" onmouseout="Low()" id="Div1" style="display:none" >
<asp:LinkButton ID="LinkButton7" runat="server" class="classItem" Width="180" ForeColor="White"
BackColor="#7593C7" onclick="LinkButton7_Click">2008年第一卷第1期</asp:LinkButton>
<asp:LinkButton ID="LinkButton8" runat="server" class="classItem" Width="180" ForeColor="White"
BackColor=" #7593C7" onclick="LinkButton8_Click" style="height: 18px" >2008年第一卷第2期</asp:LinkButton>
</div>
<div class="style7" onclick=TestBlack("Div2")>2009年期刊内容</div>
<div onmouseover="High()" onmouseout="Low()" id="Div2" style="display:none" >
<asp:LinkButton ID="l2" runat="server" class="classItem" Width="180" ForeColor="White"
BackColor="#7593C7" onclick="l2_Click">2009年第一卷第1期</asp:LinkButton>
<asp:LinkButton ID="LinkButton6" runat="server" class="classItem" Width="180" ForeColor="White"
BackColor=" #7593C7" >2009年第一卷第2期</asp:LinkButton>
<asp:LinkButton ID="LinkButton9" runat="server" class="classItem" Width="180" ForeColor="White"
BackColor=" #7593C7" onclick="LinkButton9_Click" >2009年第一卷第3期</asp:LinkButton>
<asp:LinkButton ID="LinkButton10" runat="server" class="classItem" Width="180" ForeColor="White"
BackColor=" #7593C7" onclick="LinkButton10_Click" >2009年第一卷第4期</asp:LinkButton>
</div>
<div class="style7" onclick=TestBlack("Div3")>2010年期刊内容</div>
<div onmouseover="High()" onmouseout="Low()" id="Div3" style="display:none" >
<asp:LinkButton ID="LinkButton11" runat="server" class="classItem" Width="180" ForeColor="White"
BackColor="#7593C7" >2010年第一卷第1期</asp:LinkButton>
<asp:LinkButton ID="LinkButton12" runat="server" class="classItem" Width="180" ForeColor="White"
BackColor="#7593C7" onclick="LinkButton12_Click">2010年第一卷第2期</asp:LinkButton>
<asp:LinkButton ID="LinkButton13" runat="server" class="classItem" Width="180" ForeColor="White"
BackColor="#7593C7" onclick="LinkButton13_Click">2010年第一卷第3期</asp:LinkButton>
</div>
<div style="background-image: url('App_Themes/导航下.jpg'); " class="style8"></div>
</td>
</table>
<td class="style6" style="vertical-align:top" align="right">
<iframe id="mainFrame" name="mainFrame" marginwidth="0" marginheight="0" src="<%=Request.QueryString["htm"].ToString()%>" style=" border: 0px solid #e7f5f6; width:685px; font-family: 宋体, Arial, Helvetica, sans-serif; font-size: 12px; background-color:#c3dcce" frameborder="0" scrolling="no" onload="InitFrameHeight()"></iframe>
</td>
</tr>
</table>
</div>
<div style="background-image: url('App_Themes/工作组副页(下).jpg');height:124px; background-position:center; background-repeat:no-repeat "
class="style2">
<div style="text-align:center; padding-left:0px; margin-top:0px; height:65px">
</div>
</div>
</div>
</center>
</form>
</body>
</html>
最近在改一个网站,要求改动不能太大。遇到一个大问题。就是菜单的展开问题。以上这段代码的菜单不是用css+<a>标签的方式写的。而是用DIV+Linkbutton的方式写的。点击Linkbutton从后台传值到前台,用到的是Redirect,所以整个页面会刷新,iframe里根据Url读取参数然后显示出数据。这样菜单就不能保持展开的状态了。
菜单的原理是这样的:
<div class="style7" onclick=TestBlack("Div2")>2009年期刊内容</div>
<div onmouseover="High()" onmouseout="Low()" id="Div2" style="display:none" >
<asp:LinkButton ID="l2" runat="server" class="classItem" Width="180" ForeColor="White"
BackColor="#7593C7" onclick="l2_Click">2009年第一卷第1期</asp:LinkButton>
<asp:LinkButton ID="LinkButton6" runat="server" class="classItem" Width="180" ForeColor="White"
BackColor=" #7593C7" >2009年第一卷第2期</asp:LinkButton>
<asp:LinkButton ID="LinkButton9" runat="server" class="classItem" Width="180" ForeColor="White"
BackColor=" #7593C7" onclick="LinkButton9_Click" >2009年第一卷第3期</asp:LinkButton>
<asp:LinkButton ID="LinkButton10" runat="server" class="classItem" Width="180" ForeColor="White"
BackColor=" #7593C7" onclick="LinkButton10_Click" >2009年第一卷第4期</asp:LinkButton>
</div>
用onclick调用JS函数TextBlack(),对id为“Div2”的块进行展开和隐藏操作,onmouseover和onmouseout也是调用JS函数设置展开的样式。
这是没有展开时菜单的样式。
这是点击菜单后展开的样子,我希望页面刷新后仍然保持像这样的状态。
个人有个想法是用cookies来实现,可是看了很多JS还是不懂,这次时间比较紧没办法完整地去学。Ajax也是看了不知怎么用。希望各位大侠给小弟一点指引。
--------------------编程问答-------------------- 刷新后再次调用展开函数。。。。 --------------------编程问答-------------------- 请问在哪里调用?后台吗? --------------------编程问答-------------------- 前台。。。。。onload="" --------------------编程问答--------------------
--------------------编程问答-------------------- 不行啊,有错误的,显示字符太多了。 --------------------编程问答-------------------- 你加在哪里的。。。 --------------------编程问答-------------------- 上面那个编译错误,有一行红色的,在红色下面那一行有个onclick,就加在里面。
<asp:LinkButton ID="LinkButton7" runat="server" class="classItem" Width="180" ForeColor="White" BackColor="#7593C7" onclick="TestBlack('Div1');LinkButton7_Click">2008年第一卷第1期</asp:LinkButton>
这个Linkbutton是点击的时候就执行后台的Redirect()进行传值,页面刷新以后,我的iframe才能读到值。你说刷新以后再调用一次隐藏函数,不是在点击的时候一并执行吗?
补充:.NET技术 , ASP.NET