如何使用JavaScript显示活动菜单 [英] How to show Active Menu using JavaScript
问题描述
在我的Web应用程序中，我需要突出显示用户所在的菜单.我尝试通过Onclick，Obj.cssName ="span"
使用JS.
但是那并不效果很好，OnPostback内突出菜单(子菜单)，它只是失去了他们的CssClass.
即使我尝试使用ServerSide代码. Onclick menuList.cssClass ="span"，但没有效果.
我正在使用Linkbutton，用于菜单链接的回发URL.
这是我主页
中的JS
Hi,
In my web Application, i need to highlight the menu where the user is in. I tried using JS by Onclick, Obj.cssName="span"
but it doesn''t works well, OnPostback inside highlighted menus(sub menu) it just lost their cssClass.
Even i tried with ServerSide code. Onclick menuList.cssClass="span",but noluck.
I''m using Linkbutton, Postback URL for menu links.
Here is my JS in my masterpage
function setHidden(val)
{
//alert(val.id);
document.getElementById('<%= hd.ClientID %>').value = val.id;
OOK();
}
function OOK()
{
var objhd = document.getElementById('<%= hd.ClientID %>');
// alert(objhd.value);
if(objhd.value != "")
{
var a1 = document.getElementById(objhd.value);
a1.className="red";
}
}
这是我 MasterPage
的内容
Here is my Content of MasterPage
<body >
<form id="form1" runat="server">
<asp:HiddenField ID="hd" runat="server" />
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<ul id="menu">
<li><a><asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="setHidden(this);" PostBackUrl="~/Default.aspx">One</asp:LinkButton></a></li>
<li><a><asp:LinkButton ID="LinkButton2" runat="server" OnClientClick="setHidden(this);" PostBackUrl="~/Default2.aspx">Two</asp:LinkButton></a></li>
<li><a><asp:LinkButton ID="LinkButton3" runat="server" OnClientClick="setHidden(this);" PostBackUrl="~/Default3.aspx">Three</asp:LinkButton></a></li>
<li><a><asp:LinkButton ID="LinkButton4" runat="server" OnClientClick="setHidden(this);" PostBackUrl="~/Default4.aspx">Four</asp:LinkButton></a></li>
</ul>
</form>
</body>
如果我给
< bodyönload="OOK();">
当我在菜单上单击两次时，它可以正常工作！
我猜不到我在做什么... !!
If i gave
<body önload="OOK();">
while i click twice on an menu, it works !!
i can''t guess what i does...!!
推荐答案
当然，这将帮助您.....
Sure this will help you.....
<%if (LoadPagename=="Default.aspx"){ %>
<table><tbody><tr><td><a href="Default.aspx"><img src="images/mnumm_over.jpg" height="29" width="182" border="0" style="cursor:pointer;" /></a></td></tr></tbody></table>
<%}else{ %>
<table><tbody><tr><td><a href="Default.aspx"><img src="images/mnumm.jpg" height="29" width="182" border="0" onmouseover="this.src=''images/mnumm_over.jpg''" önmouseout="this.src=''images/mnumm.jpg''" style="cursor:pointer;" /></a></td></tr></tbody></table>
<%}%>
<%if (LoadPagename=="Default2.aspx"){ %>
<table><tbody><tr><td><a href="Default2.aspx"><img src="images/mnucm_over.jpg" height="29" width="182" border="0" style="cursor:pointer;" /></a></td></tr></tbody></table>
<%}else{ %>
<table><tbody><tr><td><a href="Default2.aspx"><img src="images/mnucm.jpg" height="29" width="182" border="0" onmouseover="this.src=''images/mnucm_over.jpg''" önmouseout="this.src=''images/mnucm.jpg''" style="cursor:pointer;" /></a></td></tr></tbody></table>
<%}%>
<%if (LoadPagename=="Default3.aspx"){ %>
<table><tbody><tr><td><a href="Default3.aspx"><img src="images/mnuma_over.jpg" height="29" width="182" border="0" style="cursor:pointer;" /></a></td></tr></tbody></table>
<%}else{ %>
<table><tbody><tr><td><a href="Default3.aspx"><img src="images/mnuma.jpg" height="29" width="182" border="0" onmouseover="this.src=''images/mnuma_over.jpg''" önmouseout="this.src=''images/mnuma.jpg''" style="cursor:pointer;" /></a></td></tr></tbody></table>
<%}%>
在文件后面的代码中
On your code behind file
protected void Page_Load(object sender, EventArgs e)
{
string LoadPagename;
LoadPagename = System.IO.Path.GetFileName(Request.FilePath).ToLower();
}
内部If(条件){
//所选标签的图像....
}
其他
{
//鼠标悬停并悬停时未选中的选项卡的图像....
}
更改图像及其高度，宽度.......
Inside If(condition){
// images for selected tab....
}
else
{
// images for unselected tab with mouse hover and out....
}
Change your image and its height,width.......
这篇关于如何使用JavaScript显示活动菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
