当青训营遇上码上掘金
作品链接:KisExnhM - 码上掘金 (juejin.cn)

前言

很高兴来到字节跳动的青训营，能够与很多天南地北的小伙伴去讨论和学习是一件值得高兴的事情，朋友圈从此拓展到全国范围。接下来说说我选择的主题。

主题：我的名片

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

介绍

我的自我介绍系统是使用了html+css+js三件套实现的，系统是一个带有内容的导航栏，通过点击导航栏来展现出不同的内容，这个对于新手来说是比较好实现的。

思路

html内容只需要把多个按钮和内容模块即可，按钮和内容都要分别包裹在不同的div身上，这样方便我们操作他们的下标来展示对应的内容。
css我使用了flex布局，首先让整个大盒子居中显示，然后使用flex-direction: column，让按钮竖立显示，还需要给选中的按钮绑定上伪类hover，让它展示不同的背景颜色，其他没有选中的按钮背景色就设置为无或者同一种即可。
js主要的核心思路还是排他思想，我们先获取所有的按钮和内容，遍历所有按钮，且添加点击事件，然后把div的display和background都设置为空，再把当前下标的内容展示出来即可。

代码

html

<body>
  <div class="box">
    <div class="btn">
      <button>个人</button>
      <button>喜好</button>
      <button>学历</button>
    </div>

    <div class="content">
      <div>我叫autumn，译为秋天，之所以起这个名字是因为秋天是我最喜欢的季节，没有之一。</div>
      <div>个人喜欢打羽毛球、唱歌。</div>
      <div>本人就读于广东海洋大学，是一位应届生。</div>
    </div>
  </div>
</body>

css

    body {
      width: 400px;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .box {
      display: flex;
      width: 400px;
      height: 400px;
    }
    .btn {
      display: flex;
      flex-direction: column;
    }
    .btn button {
      width: 100px;
      height: 50px;
      background: none;
    }
    .btn button:hover {
      background: rosybrown;
    }
    .content div {
      display: none;
    }
   .content {
      background: antiquewhite;
      width: 350px;
      height: 150px;
    }

  let btns = document.querySelectorAll('button')
  let divs = document.querySelectorAll('.content div')
  btns[0].style.background = 'rosybrown'
  divs[0].style.display = 'block'
  btns.forEach((btn,index)=> {
    btn.addEventListener('click', function() {
      divs.forEach((item,index) => {
        item.style.display = 'none'
        btns[index].style.background = 'none'
      })
      divs[index].style.display = 'block'
      btn.style.background = 'rosybrown'
    })
  })

我的名片|青训营

前言

主题 ：我的名片

介绍

思路

代码

主题：我的名片