原生js选项卡

最新推荐文章于 2023-02-25 12:03:34 发布

转载最新推荐文章于 2023-02-25 12:03:34 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dujunfeng/p/7901181.html

本文介绍了一个使用CSS进行样式设计及JavaScript实现元素显示控制的简单网页案例。通过CSS选择器为不同列表项设置背景颜色，并利用JavaScript监听点击事件切换另一组元素的显示状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>Title</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    ul li{
      list-style: none;
    }
    .ul1{
      display: flex;
    }
    .ul1 li{
      width: 25%;
      height: 50px;
    }
    .ul1 li:nth-child(2n){
      background: orange;
    }
    .ul1 li:nth-child(2n+1){
      background: blue;
    }
    .ul2 li:not(:first-child){
      display: none;
    }
    .ul2 li:nth-child(2n){
      background: red;
      width: 100%;
      height:500px;
    }
    .ul2 li:nth-child(2n+1){
      background: gray;
      width: 100%;
      height:500px;
    }
  </style>
</head>
<body>
<ul class="ul1" id="u1">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<ul class="ul2" id="u2">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>
<script>
  window.onload = function(){
        var lis = document.getElementById("u1").children;
        var u2s = document.getElementById("u2").children;
        for(let i=0;i<lis.length;i++){
          lis[i].onclick = function(){
            this.index = i;
            for(let i=0;i<u2s.length;i++){
              u2s[i].style.display = "none";
            }
            u2s[this.index].style.display = "block";
          }
        }


  }
</script>

转载于:https://www.cnblogs.com/dujunfeng/p/7901181.html