Recently, the company is working on a project. In the menu navigation area of one of the headers, it is required that the navigation menu image on the page be changed. this is easy to implement for static pages or frameworks or iframe. we use include to include the top. asp. although the onclick action attribute can be defined on the Image menu. however, this onclick action is useless as long as the page is redirected. because top. asp is reloaded. to solve this problem, you can only read a global variable when loading the page. Compared with the global variable of the browser, you can use the value of this variable to determine how to display the navigation menu. so we have this article.
I think of two solutions:
1. using cookies or sessions, you can write a cookie or session variable when loading each page. This seems to be a good solution. but there is a problem. that is, if the user disables cookies, the effect will never be realized, but the default effect will always be displayed. so I gave up this practice.
2. use history or navigator to create such a variable relative to the browser. as long as my browser is not closed, this variable will continue to exist. this achieves the desired effect. I also used this method to solve the problem. the specific implementation section is as follows.
<Script type = "text/JavaScript">
<! --
Function foc (){
Document. getElementById ("searchkey"). focus ();
} // This is a function that is irrelevant to this document during search.
Function init () {// initialize the function
If (history. dmenu) {} else
{
History. dmenu = 1;
} // If history. dmenu is not defined, it is set to 1 to display the homepage effect.
Switch (history. dmenu ){
Case 1:
{
// Alert (history. dmenu );
Document. getElementById ("d_id1"). src = "/images/anB1.gif ";
Document. getElementById ("d_id2"). src = "/images/anB2.gif ";
Document. getElementById ("d_id3"). src = "/images/anB3.gif ";
Document. getElementById ("d_id4"). src = "/images/anB4.gif ";
Document. getElementById ("d_id5"). src = "/images/anB5.gif ";
Document. getElementById ("d_id6"). src = "/images/anB6.gif ";
Break ;}
Case 2:
{
// Alert (history. dmenu );
Document. getElementById ("d_id1"). src = "/images/anB11.gif ";
Document. getElementById ("d_id2"). src = "/images/anB22.gif ";
Document. getElementById ("d_id3"). src = "/images/anB3.gif ";
Document. getElementById ("d_id4"). src = "/images/anB4.gif ";
Document. getElementById ("d_id5"). src = "/images/anB5.gif ";
Document. getElementById ("d_id6"). src = "/images/anB6.gif ";
Break;
}
Case 3:
{
Document. getElementById ("d_id1"). src = "/images/anB11.gif ";
Document. getElementById ("d_id2"). src = "/images/anB2.gif ";
Document. getElementById ("d_id3"). src = "/images/anB33.gif ";
Document. getElementById ("d_id4"). src = "/images/anB4.gif ";
Document. getElementById ("d_id5"). src = "/images/anB5.gif ";
Document. getElementById ("d_id6"). src = "/images/anB6.gif ";
Break;
}
Case 4:
{
Document. getElementById ("d_id1"). src = "/images/anB11.gif ";
Document. getElementById ("d_id2"). src = "/images/anB2.gif ";
Document. getElementById ("d_id3"). src = "/images/anB3.gif ";
Document. getElementById ("d_id4"). src = "/images/anB44.gif ";
Document. getElementById ("d_id5"). src = "/images/anB5.gif ";
Document. getElementById ("d_id6"). src = "/images/anB6.gif ";
Break;
}
Case 5:
{
Document. getElementById ("d_id1"). src = "/images/anB11.gif ";
Document. getElementById ("d_id2"). src = "/images/anB2.gif ";
Document. getElementById ("d_id3"). src = "/images/anB3.gif ";
Document. getElementById ("d_id4"). src = "/images/anB4.gif ";
Document. getElementById ("d_id5"). src = "/images/anB55.gif ";
Document. getElementById ("d_id6"). src = "/images/anB6.gif ";
Break;
}
Case 6:
{
Document. getElementById ("d_id1"). src = "/images/anB11.gif ";
Document. getElementById ("d_id2"). src = "/images/anB2.gif ";
Document. getElementById ("d_id3"). src = "/images/anB3.gif ";
Document. getElementById ("d_id4"). src = "/images/anB4.gif ";
Document. getElementById ("d_id5"). src = "/images/anB5.gif ";
Document. getElementById ("d_id6"). src = "/images/anB66.gif ";
Break;
}
}
}
// The above is the specific judgment of the variable, and then according to the value of the variable to convert the image to achieve our desired effect.
Function menushow (d_id ){
Switch (d_id ){
Case 1:
History. dmenu = 1;
Break;
Case 2:
History. dmenu = 2;
Break;
Case 3:
History. dmenu = 3;
Break;
Case 4:
History. dmenu = 4;
Break;
Case 5:
History. dmenu = 5;
Break;
Case 6:
History. dmenu = 6;
Break;
}
}
// Press the related image button and set history. dmenu to the corresponding value so that the image can be changed during page loading.
// -->
</Script>
<Table width = "960" border = "0" align = "center" cellpadding = "0" cellspacing = "0">
<Tr>
<Td height = "57" colspan = "4"> <table width = "100%" border = "0" cellpadding = "0" cellspacing = "0">
<Tr>
<Td width = "394" height = "57" rowspan = "2"> </td>
<Td width = "134" height = "43"> </td>
<Td width = "129" align = "right" valign = "middle"> <a href = "#"> </a> </td>
<Td width = "97" align = "right" valign = "middle"> <a href = "#"> </a> </td>
<Td width = "100" align = "right" valign = "middle"> <strong> <a href = "#"> </a> </strong> </td>
<Td width = "92" align = "right" valign = "middle"> <a href = "#"> </a> </td>
<Td width = "14" align = "right" valign = "middle"> </td>
</Tr>
<Tr>
<Td colspan = "6"> </td>
</Tr>
</Table> </td>
</Tr>
<Tr>
<Td colspan = "4"> <table width = "100%" border = "0" cellpadding = "0" cellspacing = "0">
<Tr>
<Td width = "104"> <a href = "/"> </a> </td>
<Td width = "104" height = "28"> <a href = "/order/"> </a> </td>
<Td width = "104"> <a href = "/news/"> </a> </td>
<Td width = "104"> <a href = "/law/"> </a> </td>
<Td width = "104"> <a href = "/exhibit/"> </a> </td>
<Td width = "104"> <a href = "/company/"> </a> </td>
<Td width = "432" background = "/images/bjB1.gif"> </td>
<Td width = "4"> </td>
</Tr>
<Tr>
<Td height = "59" colspan = "7"> <table width = "100%" border = "0" cellpadding = "0" cellspacing = "0" background = "/images /bjB2.gif "class =" toptable ">
<Tr>
<Td width = "17%" height = "58" align = "center"> </td>
<Td width = "5%" align = "center"> </td>
<Td width = "4%" align = "center"> <span class = "STYLE1"> </span> </td>
<Td width = "31%" align = "center"> <input name = "searchkey" type = "text" id = "searchkey" size = "40"/> </td>
<Td width = "8%" align = "center"> <select name = "select">
<Option value = "0"> Please Select </option>
<Option value = "1"> News </option>
<Option value = "2"> Exhibit </option>
<Option value = "3"> Company </option>
</Select> </td>
<Td width = "9%" align = "center"> <a href = "#"> </a> </td>
<Td width = "10%" align = "center" valign = "middle"> <a href = "javascript: void (0) "class =" kfs "onClick =" foc () "> intra-Site Search </a> </td>
<Td width = "16%"> </td>
</Tr>
</Table> </td>
</Tr>
</Table> </td>
</Tr>
<Tr>
<Td width = "6"> </td>
<Td width = "46" align = "center" background = "/images/bjB3.gif"> <strong> announcement </strong> </td>
<Td width = "904" background = "/images/bjB3.gif"> <a href = "#" class = "lan"> to trash cans, find the Public Utility Equipment </a> <span class = "STYLE2"> new! </Span> <br/> </td>
<Td width = "6"> </td>
</Tr>
</Table>
<Script language = "javascript">
Init (); // be sure to write the code here. Otherwise, the initialization function will return an error saying that the object cannot be found.
</Script>
|
This effect is as follows:
First look at the Home Page:
Then, click the order button to view the effect. The trigger script I used is to pass a 2 parameter in the above Code as the real parameter to set history. dmenu = 2. When the page is refreshed and loaded, the current status is determined. this variable is relative to the browser. the effect is as follows:
I found a problem during the test today. I did not support IE when I used the method I wrote above. There was no problem with Firefox, so I made a small modification to the program. the process is like this. when the IE browser uses session to determine whether a session ("dmenu") is written as the corresponding value every time a button is pressed, and then the value is written in a hidden domain on the page, then, when page Initialization is performed, determine the type of browser used. If it is IE, execute the function determined by session, and this session obtains the value in the hidden domain, if the browser is not an IE browser, the above init function will be used. the judgment code is as follows: <Script language = "javascript">
If (navigator. userAgent. indexOf ("MSIE")> 0 ){
Init2 (); // execute this in IE
} Else {
Init ();
// Otherwise, execute this }
</Script> This solved the problem perfectly. some friends may say that they can use the session, but after my experiment, I did not recognize the session Firefox, and I did not know why, so I had to use this method. please let me know if you have any good methods. |
