【无标题】

最新推荐文章于 2026-01-01 17:43:06 发布

原创最新推荐文章于 2026-01-01 17:43:06 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

tab栏切换

  <style>
      .Box {
        width: 240px;
        border: 1px solid #000;
        margin: 100px auto;
        padding: 20px;
      }

      .con {
        width: 100%;
        height: 200px;
        background-color: #cccccc;
        border: 1px solid #000;
        margin-top: 10px;
        display: none;
      }

      .current {
        background-color: pink;
        border: 2px black solid;
      }

      .active {
        display:block; 
      }
    </style>
  </head>

  <body>
    <div class="Box" id="box">
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <button>按钮4</button>
      <div class="con" style="display:block">内容1</div>
      <div class="con">内容2</div>
      <div class="con">内容3</div>
      <div class="con">内容4</div>
    </div>

    <script>
      /* 思路分析
      点击上方按钮 ： 排他思想  (1)修改按钮样式 (2)显示对应下标盒子
      */

      //1.获取元素
      let buttonList = document.querySelectorAll('#box>button')
      let conList = document.querySelectorAll('#box>.con')

      //2.循环上面按钮注册点击事件
      for(let i = 0;i<buttonList.length;i++){
        buttonList[i].onclick = function(){
          //3.万能排他思想

          //3.1 先干掉所有兄弟
          for(let j = 0;j<buttonList.length;j++){//j = 0 1 2 3
            buttonList[j].style.backgroundColor = ''
            conList[j].style.display = 'none'
          }

          //3.2 复活我自己 和 下面下标一致兄弟
          buttonList[i].style.backgroundColor = 'pink'
          conList[i].style.display = 'block'
        }
      };
    </script>
  </body>

attribute语法操作自定义属性

 <body>
    <!-- 
      标准属性 ： html和css官网文档有的属性
      自定义属性 ： 自己添加的属性
     -->
    <div
      id="box"
      class="one"
      style="width: 100px;background-color: red"
      aaa = "111"
    ></div>
    <script>
      /* 
      1.attribute语法作用 ： 操作元素自定义属性
        * 自定义属性一般用来存储一些数据的
      2.attitude语法
        * 存储 ：  元素.setAttribute('属性名',属性值)
        * 读取 :   元素.getAttribute('属性名')
        * 删除 :   元素.removeAttribute('属性名')
      */

      let box = document.querySelector('#box')

      //1.存
      box.setAttribute('aaa','222')//有则覆盖
      box.setAttribute('bbb','333')//无则新增

      //2.获取
      let aaa = box.getAttribute('aaa')
      console.log( aaa )//'222'

      //3.删除
      box.removeAttribute('bbb')
      
    </script>
  </body>

隔行变色高级版

<body>
    <ul>
      <li>我是1</li>
      <li>我是2</li>
      <li>我是3</li>
      <li>我是4</li>
      <li>我是5</li>
      <li>我是6</li>
      <li>我是7</li>
      <li>我是8</li>
      <li>我是9</li>
      <li>我是10</li>
    </ul>

    <script>
      /* 需求:
      (1)隔行变色： 单数行(下标偶数) 绿色   双数行：黄色
      (2)鼠标移入li ： 自己变红
      (2)鼠标移出li : 自己恢复原先的颜色
      */

      //1.获取元素
      let liList = document.querySelectorAll('li')
      //2.循环设置颜色 + 注册事件
      for(let i = 0;i<liList.length;i++){
        //2.1 设置颜色
        /* 表达式 ? 代码1 : 代码2 */
        liList[i].style.backgroundColor = (i % 2 == 0 ? 'green' : 'yellow')

        //2.2 鼠标移入
        liList[i].onmouseenter = function(){
          //3. 自己变红   this:事件源 (我自己)
          //3.1 先使用自定义属性存储 当前颜色
          this.setAttribute('aaa', this.style.backgroundColor  )
          //3.2 修改自己颜色
          this.style.backgroundColor = 'red'
        }
        //2.3 鼠标移出
        liList[i].onmouseleave = function(){
          //3. 自己变原先颜色   this:事件源 (我自己)
          //取出自定义属性存储的颜色
          this.style.backgroundColor = this.getAttribute('aaa')
        }

      };
    </script>
  </body>