js는 라벨 클릭 전환 코드를 구현합니다(코드 첨부).-JS 튜토리얼-php.cn

js는 라벨 클릭 전환 코드를 구현합니다(코드 첨부).

php中世界最好的语言

풀어 주다： 2018-04-18 10:07:32

원래의

1949명이 탐색했습니다.

이번에는 라벨 클릭 전환을 구현하는 js 코드(코드 첨부)를 가져오겠습니다. js 라벨 클릭 전환 코드를 구현하기 위한 주의사항은 무엇인가요?

웹사이트에 관해서는 웹사이트에 클릭할 때마다 전환되는 태그가 많다는 사실을 많은 사람들이 잘 알고 있다고 생각합니다. 그렇다면 이 효과가 어떻게 달성되는지 아는 사람이 있습니까? 다음 글에서는 js에서 라벨 클릭 전환을 구현하는 방법을 소개합니다. 글에서 구체적인 구현 예시 코드를 알아볼 수 있습니다.

이 기사의 예에서는 JS에서 구현한 간단한 라벨 클릭 전환 기능을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style-type: none;
    }
    .box {
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      overflow: hidden;
    }
    .hd {
      height: 45px;
    }
    .hd span {
      display: inline-block;
      width: 90px;
      background-color: pink;
      line-height: 45px;
      text-align: center;
      cursor: pointer;
    }
    .hd span.current {
      background-color: yellowgreen;
    }
    .bd li {
      height: 255px;
      background-color: yellowgreen;
      display: none;
    }
    .bd li.current {
      display: block;
      font-size: 36px;
    }
  </style>
</head>
<body>
<p class="box" id="box">
  <p class="hd">
    <span class="current">体育</span>
    <span>娱乐</span>
    <span>新闻</span>
    <span>综合</span>
  </p>
  <p class="bd">
    <ul>
      <li class="current">我是体育模块</li>
      <li>我是娱乐模块</li>
      <li>我是新闻模块</li>
      <li>我是综合模块</li>
    </ul>
  </p>
</p>
<script>
  var box = document.getElementById("box");
  var spans = box.getElementsByTagName("span");
  var lis = box.getElementsByTagName("li");
  for (var i = 0; i < spans.length; i++) {
    spans[i].aaa = i;
    spans[i].onclick = function () {
      for (var i = 0; i < spans.length; i++) {
        spans[i].className = "";
        lis[i].className = "";
      }
      this.className = "current";
      lis[this.aaa].className = "current";
    }
  }
</script>
</body>
</html>

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!