利用jquery实现导航栏只给一个元素添加样式同时移出其他元素的这个相同的样式

<nav>
    <div>
      首页
    </div>
    <div>
      详情
    </div>
    <div>
      更多
    </div>
    <div>
      视频
    </div>
    <div>
      娱乐
    </div>

  </nav>

<style>

    *{
      padding: 0;
      margin: 0;
    }
    body{
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    nav{
      width: 80%;
      display: flex;
      flex-direction: row;
    }
    nav div{
      height: 40px;
      width: 100px;
      background-color: aqua;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
    .nosel{
      background-color: pink;
    }
</style>

 $(function(){
    $('nav div').on('click',function(){
      // this这里就是你点击的那个元素
      // siblings 是过滤出来除了你点击的元素的其他所有兄弟元素记住是兄弟元素
      $(this).siblings('div').removeClass('nosel')
      $(this).addClass('nosel')
    })
  })

首先引入jquery是必须的代码中没有写自己下载引入

注意siblings中能过滤兄弟元素，所有html布局的时候要确保每一栏是兄弟元素关系