Recently, the company is working on a project, in which one of the head menu navigation areas requires that the navigation menu pictures above should also be changed after entering the relevant page. This is easy to implement for static pages or frames or iframes. And we use include to include this. Although the action properties of onclick can be defined on that picture menu. But as soon as the page is jumped, the onclick action will be useless. Because it was reloaded. If you want to solve this problem, you can only read a global variable when the page is loaded. Compared with the browser's global variable, the value of this variable is used to determine how the navigation menu should be displayed. So this article was also found.
There are two solutions that I have come up with:
1. Using cookies or sessions, write a cookies or session variable when each page is loaded, which seems to solve the problem well. But there was a problem. That is, if the user prohibits cookies, this effect will not be achieved and will always only display the default effect. So I gave up on this
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 effect we want. I also used this method to solve it. The following is the specific implementation part.
|
<script type="text/JavaScript">
<!--
function foc(){
("searchkey").focus();
} //This is a function that has nothing to do with this article when doing searching
function init(){ //Initialize the function
if (){}else
{
=1;
}
//If there is no definition, set to 1 to display the effect of the home page button
switch(){
case 1:
{
//alert();
("d_id1").src="/images/";
("d_id2").src="/images/";
("d_id3").src="/images/";
("d_id4").src="/images/";
("d_id5").src="/images/";
("d_id6").src="/images/";
break;}
case 2:
{
//alert();
("d_id1").src="/images/";
("d_id2").src="/images/";
("d_id3").src="/images/";
("d_id4").src="/images/";
("d_id5").src="/images/";
("d_id6").src="/images/";
break;
}
case 3:
{
("d_id1").src="/images/";
("d_id2").src="/images/";
("d_id3").src="/images/";
("d_id4").src="/images/";
("d_id5").src="/images/";
("d_id6").src="/images/";
break;
}
case 4:
{
("d_id1").src="/images/";
("d_id2").src="/images/";
("d_id3").src="/images/";
("d_id4").src="/images/";
("d_id5").src="/images/";
("d_id6").src="/images/";
break;
}
case 5:
{
("d_id1").src="/images/";
("d_id2").src="/images/";
("d_id3").src="/images/";
("d_id4").src="/images/";
("d_id5").src="/images/";
("d_id6").src="/images/";
break;
}
case 6:
{
("d_id1").src="/images/";
("d_id2").src="/images/";
("d_id3").src="/images/";
("d_id4").src="/images/";
("d_id5").src="/images/";
("d_id6").src="/images/";
break;
}
}
}
//The above is to determine which variable is specifically and then transform the picture based on the value of the variable to achieve the effect we want.
function menushow(d_id){
switch(d_id){
case 1:
=1;
break;
case 2:
=2;
break;
case 3:
=3;
break;
case 4:
=4;
break;
case 5:
=5;
break;
case 6:
=6;
break;
}
}
//Press the relevant picture button and set it to the corresponding value so that the picture can be transformed according to this value when the page is loaded.
//-->
</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"><img src="/images/" width="394" height="57" /></td>
<td width="134" height="43"> </td>
<td width="129" align="right" valign="middle"><a href="#"><img src="/images/" width="114" height="26" border="0" /></a></td>
<td width="97" align="right" valign="middle"><a href="#"><img src="/images/" width="78" height="26" border="0" /></a></td>
<td width="100" align="right" valign="middle"><strong><a href="#"><img src="/images/" width="75" height="26" border="0" /></a></strong></td>
<td width="92" align="right" valign="middle"><a href="#"><img src="/images/" width="70" height="26" border="0" /></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="/"><img src="/images/" name="d_id1" width="103" height="28" border="0" onClick="menushow(1)"/></a></td>
<td width="104" height="28"><a href="/order/"><img src="/images/" name="d_id2" width="104" height="28" / border="0" onClick="menushow(2)"></a></td>
<td width="104"><a href="/news/"><img src="/images/" name="d_id3" width="104" height="28" border="0" onClick="menushow(3)"/></a></td>
<td width="104"><a href="/law/"><img src="/images/" name="d_id4" width="104" height="28" border="0" onClick="menushow(4)"/></a></td>
<td width="104"><a href="/exhibit/"><img src="/images/" name="d_id5" width="104" height="28" border="0" onClick="menushow(5)"/></a></td>
<td width="104"><a href="/company/"><img src="/images/" name="d_id6" width="104" height="28" border="0" onClick="menushow(6)"/></a></td>
<td width="432" background="/images/"> </td>
<td width="4"><img src="/images/" width="4" height="28" /></td>
</tr>
<tr>
<td height="59" colspan="7"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="/images/" class="toptable">
<tr>
<td width="17%" height="58" align="center"> </td>
<td width="5%" align="center"><img src="/images/" width="30" height="30" /></td>
<td width="4%" align="center"><span class="STYLE1"></span></td>
<td width="31%" align="center"><input name="searchkey" type="text" 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="#"><img src="/images/" width="74" height="24" border="0" /></a></td>
<td width="10%" align="center" valign="middle"><img src="/images/" width="3" height="5" /> <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"><img src="/images/" width="6" height="29" /></td>
<td width="46" align="center" background="/images/"><strong>Announcement</strong></td>
<td width="904" background="/images/"><a href="#" class="lan"> to trash cans, find the Public Utility Equipment </a><span class="STYLE2">new!</span><br /></td>
<td width="6" ><img src="/images/" width="6" height="29" /></td>
</tr>
</table>
<script language="javascript">
init(); //Be careful to write it here, otherwise this initialization function will report an error saying that the object cannot be found
</script>
|
This effect is as follows:
Let’s look at the homepage first:
Let's look at the effect after pressing the order view button: the trigger script I used is onclick="menushow(2)" in the above code, that is, pass a 2 as a real parameter, so that the current status will be determined when the page is refreshed and loaded. Because this variable is relative to the browser. The effects are as follows:
|
I found a problem during the test today. I had to use the method written above to not support IE, and there was no problem with Firefox, so I made minor modifications to the program. This is the process. For the IE browser, use session to judge. Every time a button is pressed, write a session ("dmenu") as the corresponding value, and then write this value in a hidden field of the page. Then, determine what type of browser is used when the page is initialized. If it is an IE, execute the function judged by session. This session is by obtaining the value in the hidden field, and if it is a non-IE browser, use the init function I wrote above yesterday, which is the above. The judgment code is as follows:
<script language="javascript">
if(("MSIE")>0){
init2();//It is IE browser to execute this
}else{
init();
//Otherwise execute this
}
</script>
This perfectly solves this problem. Maybe some friends would say that session is enough, but after my experiment, I used session Firefox to not recognize it at all, and I don’t know why, so I had to use my method. If you have a good way, please let me know.
|
