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

Init_Vieeee

于 2021-11-27 14:44:40 发布

阅读量810

点赞数

分类专栏：导航栏状态保持文章标签： vscode jquery css3 html5

本文链接：https://blog.youkuaiyun.com/m0_60687710/article/details/121577014

版权

导航栏状态保持专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用jQuery实现一个响应式的导航栏，通过点击切换背景颜色并保持兄弟元素间的选中状态。涉及CSS布局和JavaScript事件处理。

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

<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布局的时候要确保每一栏是兄弟元素关系