Cette fois, je vous apporte la fonction js menu secondaire pour afficher le contenu après avoir cliqué. Quelles sont les précautions pour que le menu secondaire js affiche le contenu après avoir cliqué. le combat réel Jetons un coup d’œil au cas.
Récemment créé un effet d'événement de clic sur le menu secondaire. Il y a 3 menus de premier niveau, le menu secondaire est corrigé et la mise en page HTML n'est pas une relation parent-enfant. détails. Le rendu est le suivant
La structure html est la suivante
<p> <ul> <li>您好!日期</li> <li class="li_list checked grounder">滚球</li> <li class="li_list">今日赛事</li> <li class="li_list">早盘</li> <li><img src="../img/live_tv_m.gif" alt=""></li> <li>更改密码</li> <li>密码恢复</li> </ul> <ul id="allBall"> <li>账户历史</li> <li>|</li> <li>交易状况</li> <li class="ball foot">足球</li> <li>|</li> <li class="ball basketball">篮球/美式足球</li> <li>|</li> <li class="ball tentis">网球</li> <li>|</li> <li class="ball ">排球</li> <li>|</li> <li class="ball badminton">羽毛球</li> <li>|</li> <li class="ball ping-pong">乒乓球</li> <li>|</li> <li class="ball base">棒球</li> <li>|</li> <li class="ball table">斯诺克/台球</li> <li>|</li> <li class="ball other">其他</li> </ul> </p> <p id="container_main"> <p id="roll" class="A_list"> <p style="display: block"> <iframe src="../roll_ball_index.html" frameborder="0" style="width: 1500px;height: 1000px;" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe> </p> <p></p> //p内写你所需要展现的内容 <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </p> <p id="today" class="A_list"> <p style="display: block"></p> <p></p> <p> </p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </p> <p id="earlier" class="A_list"> <p style="display: block"></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </p> </p>
Je ne listerai pas les styles css un par un ici, vous pouvez le concevoir en fonction des besoins de votre propre page
Ce qui suit est le contenu important js
function allGame() { var lis = document.querySelectorAll('.li_list'); //获取三大玩法按钮 var A_list = document.getElementsByClassName('A_list');//获取三大赛事 var ball = document.getElementsByClassName("ball"); //获取球类赛事 for(var i=0;i<lis.length;i++){ //首先边框一级菜单 lis[i].index = i; //获取三大玩法的下标 lis[i].onclick = function () { //一级菜单的点击事件 for( var i=0;i<lis.length;i++){ lis[i].className = ''; A_list[i].style.display="none"; } this.className='checked'; A_list[this.index].style.display="block"; //for循环利用排他思想显示当前点击的选项 var x = this.index; //重点:第一次点击的时候获取到的下标保存一个变量x var a_list = document.getElementsByClassName('A_list')[x]; //利用下标获取A_list[x] var aa_list = a_list.getElementsByTagName("p");//根据上一步获取相应 的子级p for(var j=0;j<ball.length;j++){ //进行二级菜单遍历 ball[j].indexa = j; ball[j].onclick = function () { //同样的遍历 同样的排他思想 for(var a=0;a<aa_list.length;a++){ aa_list[a].style.display = "none"; //所有的p都隐藏 } aa_list[this.indexa].style.display="block"; // 当前的显示 } } } } } allGame();
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour plus de passionnant. contenu, veuillez faire attention aux autres articles connexes sur le site Web php chinois !
Lecture recommandée :
Analyse des étapes pour utiliser le composant PopupWindow dans Vue
Explication détaillée des étapes pour implémenter la pagination dynamique et statique dans layui
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!