Comment implémenter le menu javascript-js tutoriel-php.cn

Comment implémenter le menu javascript

coldplay.xixi

Libérer： 2023-01-04 09:35:48

original

2595 Les gens l'ont consulté

Comment implémenter le menu JavaScript : représentez d'abord le menu avec une ligne de tableau ; puis placez tous les éléments de menu sous ce menu dans la seule cellule d'une ligne de tableau immédiatement après le menu ; gérer l'événement de clic de menu.

Comment implémenter le menu javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur DELL G3.

Comment implémenter le menu javascript :

1 Utilisez une ligne de tableau pour représenter le menu (Menu), dans lequel il n'y a qu'une seule cellule, et le contenu. est le nom du menu. Par exemple :

Code HTML

<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>

Copier après la connexion

Cet endroit définit également un ID pour la cellule qui représente le menu La définition de cet ID est très importante et est visible. tout au long de la page, vous pouvez donc utiliser ID pour

spécifier les attributs de l'élément qu'il représente. Le contenu de la cellule est un lien hypertexte, qui spécifie une méthode javascript pour répondre à l'événement après avoir cliqué sur ce menu

2 Placez tous les éléments de menu sous ce menu dans une ligne de tableau immédiatement après le menu. uniquement dans les cellules, utilisez des sauts de ligne pour les disposer verticalement

Code HTML

<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>

Copier après la connexion

Notez ici qu'un identifiant est défini pour la ligne du tableau où sont placés les éléments de menu. sera contrôlé via cet ID De plus, l'état initial du menu est réduit, c'est-à-dire que cette ligne est invisible, donc le code CSS style="display:none"

3. est au centre de tout le processus. Vous devez écrire un morceau de code js pour gérer l'événement de clic du menu

Code de copie du code Js

<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>

Copier après la connexion