집 > 기사 > 웹 프론트엔드 > 클릭 시 보조 메뉴의 현재 내용을 구현하기 위해 js를 작동하는 방법

클릭 시 보조 메뉴의 현재 내용을 구현하기 위해 js를 작동하는 방법

php中世界最好的语言원래의: 2018-06-01 17:20:411810검색

이번에는 js를 조작하여 보조 메뉴를 클릭하면 현재 콘텐츠가 표시되는 방법과, js를 사용하여 현재 콘텐츠를 표시하려면 보조 메뉴를 구현하는 데 사용할

주의사항

에 대해 설명하겠습니다. 실제 사례를 살펴보겠습니다. 최근 보조 메뉴 클릭 이벤트 효과를 만들었습니다. 기본 메뉴가 3개 있고, 보조 메뉴가 수정되었으며,
html 레이아웃

이 부모-자식 관계가 아닙니다. 자세한 내용은 아래 렌더링을 참조하세요. HTML 구조는 다음과 같습니다

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

css 스타일. 여기서는 하나씩 나열하지 않겠습니다. 자신의 페이지 요구에 따라 디자인하세요.

다음은 중요한 내용입니다. js

function allGame() {
  var lis = document.querySelectorAll(&#39;.li_list&#39;); //获取三大玩法按钮
  var A_list = document.getElementsByClassName(&#39;A_list&#39;);//获取三大赛事
  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 = &#39;&#39;;
        A_list[i].style.display="none";
      }
      this.className=&#39;checked&#39;;
      A_list[this.index].style.display="block"; //for循环利用排他思想显示当前点击的选项 
      var x = this.index; //重点：第一次点击的时候获取到的下标保存一个变量x
      var a_list = document.getElementsByClassName(&#39;A_list&#39;)[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();

당신은 이 기사를 읽었을 것입니다. 더 흥미로운 정보를 얻으려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!