jQuery弄一个tab选项卡

用jQuery来制作tab的选项卡。
说白了就是切换到别的选项，已简单的例子来说，先写出样式.
CSS部分:

<style>
    ul,li{
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav {
      width: 80%;
      line-height: 48px;
      background: #f6f8fa;
      overflow: hidden;
      margin: 10px auto 0;
    }

    .nav li {
      width: 140px;
      line-height: 48px;
      display: inline-block;
      color: #7f7f7f;
      font-size: 16px;
      font-family: "Microsoft Yahei";
      text-align: center;
      cursor: pointer;
    }

    .nav li span {
      padding-left: 4px;
      font-size: 12px;
      color: red;
    }

    .nav li.on {
      border-top: 3px solid #ed5565;
      border-radius: 7px 7px 0 0;
      background: #fff;
    }

    .tab-content {
      width: 80%;
      margin: 0 auto;
      padding: 15px 0;
      border: 1px solid #eee;
    }
  </style>

然后就是HTML的部分：

<ul class="nav" id="nav">
    <li >我参与的项<span>(8)</span></li>
    <li >全部项目<span>(21)</span></li>
    <li class="on">待处理<span>(2)</span></li>
  </ul>
  <div class="tab-content" id="tabbox">
    tab选项卡
  </div>

展示出来是这样的。

接下来引入jQuery插件然后写出jQuery的代码：

<script src="./js/jquery-3.6.0.min.js"></script>
  <script> 
     $('li').click(function(){
      $(this).addClass('on').siblings().removeClass();
     })
  </script>

这个意思是获取li的标签然后给它们一个点击事件，然后再点击的选项添加on的类，然后其他的有on的类删除，效果是这样子：

这篇好文章是转载于：学新通技术网