master

分支 (1)

管理

管理

master

css-effect-exercise
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Demo</title>
  <link rel="stylesheet" href="styles/css/page.css">
</head>

<body>
  <div class="page">
    <nav>
      <a href="loading.html">加载动画</a>
      <a href="carousel.html">Steps 轮播图</a>
      <a href="arrow.html">箭头</a>
      <a href="shadow.html">轻拟物</a>
    </nav>
    <main>
      <iframe src="loading.html" frameborder="0"></iframe>
    </main>
  </div>

  <script>
    let navButtons = document.querySelectorAll('.page nav a'),
      frame = window.frames
    navButtons.forEach((item) => {
      item.addEventListener('click', function (e) {
        e.preventDefault();
        frame[0].location.href = this.href
      })
    })
  </script>
</body>

</html>