Recently, the company is doing a project, one of the head of the menu navigation area, requirements to achieve the relevant page after the navigation menu picture also need to transform. This is easy to implement for static pages or for frames or IFRAME. And we are using include to include this top.asp. Although you can define the onclick action properties on that picture menu. But as long as a jump page, then this onclick action is useless. Because the top.asp is reloaded. If you want to solve this problem, you can only read a global variable when the page loads, relative to the browser's global variables, through the value of the variable to determine how the navigation menu should be displayed. And then there is the article.
There are two ways I can think of solutions:
1. Using cookies or sessions, write a cookie or session variable on each page load, which can seem like a good solution to the problem. But there was a problem. That is, if the user prohibits cookies, then this effect will not be achieved, always just show the default effect. That's why I dropped the practice.
2. Use history or navigator to create such a variable relative to the browser. As long as my browser is not closed, then this variable will continue to exist. This achieves the desired effect. That's the way I'm going to solve it. Here is the concrete implementation section.
| <script type= "Text/javascript" >
<!--
function Foc () {
document.getElementById ("Searchkey"). focus ();
A function is not relevant to this article when doing a search
function init () {//initialization functions
if (history.dmenu) {}else
{
History.dmenu=1;
} If History.dmenu is not defined then set to 1 to display the effect of the first button
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 specific to determine the variable and then according to the value of the variable to do the image transformation so as 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 relevant Picture button and set History.dmenu to the corresponding value so that when the page load can be based on this value to the image transformation
-->
</script>
<table width= "960" border= "0" align= "center" cellpadding= "0" cellspacing= "0" >
<tr>
<TD height= "colspan=" 4 "><table width=" 100% "border=" 0 "cellpadding=" 0 "cellspacing=" 0 ">
<tr>
<TD width= "394" height= "rowspan=" 2 "></td>"
<TD width= "134" height= "> </td>"
<TD width= "129" align= "right" valign= "middle" ><a href= "#" ></a></td>
<TD width= "align=" "right" valign= "middle" ><a href= "#" ></a></td>
<TD width= "align=" "right" valign= "middle" ><strong><a href= "#" ></a></strong></td>
<TD width= "align=" "right" valign= "middle" ><a href= "#" ></a></td>
<TD width= "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= "><a href="/"></a></td>
<TD width= "height=" ><a href= "/order/" ></a></td>
<TD width= "><a" href= "/news/" ></a></td>
<TD width= "><a" href= "/law/" ></a></td>
<TD width= "><a" href= "/exhibit/" ></a></td>
<TD width= "><a" href= "/company/" ></a></td>
<TD width= "432" background= "/images/bjb1.gif" > </td>
<TD width= "4" ></td>
</tr>
<tr>
<TD height= "colspan=" 7 "><table width=" 100% "border=" 0 "cellpadding=" 0 "cellspacing=" 0 "background="/ Images/bjb2.gif "class=" toptable ">
<tr>
<TD width= "17%" height= "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= ""/></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 ()" > Site search </a></td>
<TD width= "16%" > </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<TD width= "6" ></td>
<TD width= "align=" "Center" background= "/images/bjb3.gif" ><strong> announcement </strong></td>
<TD width= "904" background= "/images/bjb3.gif" ><a "#" href= "LAN" > to class= Trash, find the public cans Equipment </a><span class= "STYLE2" >new!</span><br/></td>
<TD width= "6" ></td>
</tr>
</table>
<script language= "JavaScript" >
Init (); Note Here must be written here, otherwise this initialization function will report an error to say that can't find the right image
</script>
|
This effect is as follows:
First Look home:
Then look at the effect of pressing the Order View button: The trigger script I used was the onclick= "Menushow (2)" In the above code to pass a 2 as the argument, thus setting history.dmenu=2 so that when the page refreshes the load, it will determine the current state. Because this variable is relative to the browser. The effect is as follows:
Today, the test found a problem, you have to write the above method of IE does not support, there is no problem in Firefox, so the program made a small change. The process is like this. For IE browser use session to judge, each press a button to write a session ("Dmenu") for the corresponding value, and then write this value in a hidden field of the page, and then in the page initialization to determine what type of browser to use, If IE is to perform through the session to judge the function, and this session is by capturing the value of the hidden domain, and if the non-ie browser used above I wrote yesterday is the above init function. The judgment code is as follows: <script language= "JavaScript" >
if (Navigator.userAgent.indexOf ("MSIE") >0) {
Init2 ()//is the IE browser to execute this
}else{
Init ();
Otherwise execute this }
</script> This is the perfect solution to the problem. Perhaps some friends will say with the session on it, but after my experiment is to use the session of Firefox, I do not know why, so I have to use this method. If you have a good way, please let me know. |
