How to implement javascript menu-JS Tutorial-php.cn

How to implement javascript menu

coldplay.xixi

Release： 2023-01-04 09:35:48

Original

2595 people have browsed it

How to implement the javascript menu: first represent the menu with a table row; then place all the menu items under this menu in the only cell in a table row immediately after the menu ;Finally, use js code to handle the click event of the menu.

How to implement javascript menu

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, DELL G3 computer.

How to implement the javascript menu:

1. Use a table row to represent the menu (Menu), in which there is only one cell, and the content is the name of the menu. For example:

Html code

<TR>  
         <TD id="td_0" align="middle" width="89%" bgColor=#1f65c2>  
         <A href="javascript:Show(0)">基础数据管理</A>     
        </TD>  
</TR>   
<TR>
         <TD id="td_0" align="middle" width="89%" bgColor=#1f65c2>
         <A href="javascript:Show(0)">基础数据管理</A>  
        </TD>
</TR>

Copy after login

This place also defines an ID for the cell that represents the menu. The definition of this ID is very important and is visible throughout the page, so You can

specify the attributes of the element it represents through the ID. The content of the cell is a hyperlink, which specifies a javascript method to respond to the event after clicking this menu.

2. Place all the menu items under this menu in a table row immediately after the menu. In the only cell, use line breaks to arrange them vertically

Html code

<TR id=tr_0 style="DISPLAY: none;cursor:hand">  
          <TD align="middle" bgColor="#4c84ce" height="50">  
               <DIV align="center">  
                              <A href="" >图书分类信息</A> <BR>  
                              <A href="" >藏馆信息</A> <BR>  
              </DIV>  
        </TD>  
</TR>  
<TR id=tr_0 style="DISPLAY: none;cursor:hand">
          <TD align="middle" bgColor="#4c84ce" height="50">
               <DIV align="center">
                              <A href="" >图书分类信息</A> <BR>
                              <A href="" >藏馆信息</A> <BR>
              </DIV>
        </TD>
</TR>

Copy after login

Note here that an ID is defined for the table row where the menu items are placed. The expansion and collapse of the menu will be controlled through this ID. In addition, the initial state of the menu is collapsed, that is, this line is invisible, so the CSS code style="display:none"

3. Third The first step is the focus of the whole process. You need to write a piece of js code to handle the click event of the menu

Js code copy code

<script>     
          var classCount = 4; // 菜单大类的个数   
      function Show(theId) {//参数为菜单的编号，从0开始    
        theTr = eval("tr_" + theId);  //生成相应元素的在页面中的ID   
              //通过此ID来设置相应元素的CSS属性   
              //如果是折叠的，则展开之   
        if (theTr.style.display == "none") {   
            theTr.style.display = "block";   
        }   
              //否则折叠之   
        else {   
            theTr.style.display = "none";   
        }   
              //遍历关闭之前展开的菜单(对当前菜单不做处理)    
        for (i = 0; i < classCount; i++) {   
            if (i == theId)   
                continue;   
            theTr = eval("tr_" + i);   
            theTr.style.display = "none";   
        }   
      }   
</script>  
<script>
          var classCount = 4; // 菜单大类的个数
  function Show(theId) {//参数为菜单的编号，从0开始 
  theTr = eval("tr_" + theId);  //生成相应元素的在页面中的ID
              //通过此ID来设置相应元素的CSS属性
              //如果是折叠的，则展开之
if (theTr.style.display == "none") {
theTr.style.display = "block";
}
              //否则折叠之
else {
theTr.style.display = "none";
}
              //遍历关闭之前展开的菜单(对当前菜单不做处理) 
for (i = 0; i < classCount; i++) {
if (i == theId)
continue;
theTr = eval("tr_" + i);
theTr.style.display = "none";
}
  }
</script>

Copy after login

Related free learning recommendations: javascript learning Tutorial

The above is the detailed content of How to implement javascript menu. For more information, please follow other related articles on the PHP Chinese website!