js 点击tab栏切换背景，同时变更背景图片

拂晓等明月

于 2023-07-24 20:45:27 发布

阅读量495

点赞数 1

分类专栏： javascript练习文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/qq_61320547/article/details/131904632

版权

javascript练习专栏收录该内容

20 篇文章

订阅专栏

此代码示例展示了如何使用HTML、CSS和JavaScript创建一个具有导航菜单的网页，当用户点击菜单项时，对应的图片会显示出来。通过DOM操作改变元素的样式和显示状态，实现了简单的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

详细步骤：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      ul {
        display: flex;
        list-style: none;
      }
      .box {
        width: 1200px;
        height: 700px;
        margin: 100px auto;
        border: 1px solid #ccc;
      }
      li {
        width: 240px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: #ccc;
      }
      .lis {
        background-color: brown;
      }
      .bottom div {
        display: none;
      }
      .bottom {
        width: 1200px;
        height: 650px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="top">
        <ul>
          <li>商品介绍</li>
          <li>规格与包装</li>
          <li>售后保障</li>
          <li>商品评价</li>
          <li>手机社区</li>
        </ul>
      </div>
      <div class="bottom">
        <div class="items"><img src="./image/1.jpg" alt="" width="1200px" /></div>
        <div class="items"><img src="./image/2.jpg" alt="" width="1200px" /></div>
        <div class="items"><img src="./image/3.jpg" alt="" width="1200px" /></div>
        <div class="items"><img src="./image/4.jpg" alt="" width="1200px" /></div>
        <div class="items"><img src="./image/5.jpg" alt="" width="1200px" /></div>
      </div>
    </div>
    <script>
      // 1.获取li点击触发元素-全部
      let li = document.querySelectorAll('li')
      // 12.获取所有变化元素，包裹着img的div
      let divs = document.querySelectorAll('.items')
      // 2.li绑定点击事件，有多个触发元素li，因此用for循环给所有li绑定
      for (let i = 0; i < li.length; i++) {
        // 13.准备好li的索引-li没有索引，手动添加: index=索引，i代表索引值为当前li[i]添加i
        li[i].setAttribute('index', i)
        // 3.当前li-第i个li
        li[i].onclick = function () {
          // 4.当前的li点击后触发的变化
          // 5.li改变背景颜色代表被点击
          // 6.上面css中有 .lis 类选择器，代表点击后的背景颜色
          // 8.在改变颜色之前，让所有的li颜色去掉
          // 9.用for循环遍历所有li，让其所有的背景全去掉
          for (let i = 0; i < li.length; i++) {
            // 10.去掉第7步添加的类名
            li[i].className = ''
          }
          // 7.发现可以改变颜色，但是每点一个都会变，只能点击一次且其它颜色不消失
          li[i].className = 'lis'
          // 11.到这里，上面效果已完成。开始解决点击后变化背景图片，需要将li触发元素与变化元素联系起来
          // 用索引吧，毕竟有多个触发元素和变化元素
          // 14.获取li的索引
          var index = li[i].getAttribute('index')
          // console.log(index)15.测试
          // 16.和9一样的操作
          for (let i = 0; i < divs.length; i++) {
            // 17.复原所有为none
            divs[i].style.display = 'none'
          }
          // 15.变化元素的第index，也是li的索引，相同的个数，相同的索引，但是有一个和7步一样的问题
          divs[index].style.display = 'block'
        }
      }
    </script>
  </body>
</html>

效果：