1、我们都知道jQuery是一个封装好的函数方法库，通过jQuery可以将更加简单的实现链式编程。下面给大家一个一行代码实现选项卡效果。

1-1.首先就是先简单的写一下结构样式

1.1.1
准备工作—从jQuery官网下载方法库放在项目文件中等待html文件加载
选项卡业务分析：
（1）首先是在一个大的div（盒子）里包着两个小盒子（ul ol）
（2）当点击或者经过 ul 里的 li 标签时 ol 里的相同索引的 li 显示 其他的兄弟 li 隐藏（ol 下的li 默认隐藏 在 ul li 被点击时 ol 里的 相同 索引下标 的li 才会 赋值样式 display：flex；让其显示）
（3）当点击 ul 下的 li 时，被点击的 li 添加样式，它的所有兄弟 li 去除样式

1.1.2
写好选项卡的页面HTML结构

<div class="tabcard">
      <ul>
        <li class="active">新闻</li>
        <li>发现</li>
        <li>关于我们</li>
      </ul>
      <ol>
        <li class="active new">
          你说我的眼睛灿若星辰，那是因为你是星辰，而我的眼中只有你。
        </li>
        <li class="find">
        我喜欢那些闪光的东西，比如冬日的雪花，天上的星星，还有你的眼睛。
        </li>
        <li class="about">
          像华丽的燕尾蝶，失去往日的光彩、变作一片枯死的叶。
        </li>
      </ol>
    </div>

样式如下图：
当然这个选项卡不是很美观，样式都可以自己去设定。这里就简单的做一个样式。

1.1.3
下面是css样式：
可以用来参考，根据自身需要进行修改

.tabcard {
    width: 100%;
    border: 2px solid red;
    height: 200px;
}

.tabcard ul {
    margin: 0;
    width: 100%;
    height: 30px;
    border-bottom: 2px solid red;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.tabcard ul li {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 30px;
}

.tabcard ol {
    width: 100%;
    height: calc(100% - 30px);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    position: relative;
}

.tabcard ol li {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    display: none;

}

.tabcard ul li:nth-child(2) {
    border-right: 4px solid gray;
    border-left: 4px solid gray;
}

.new {
    background: rgb(118, 147, 158);
}

.find {
    background: rgb(212, 180, 180);
}

.about {
    background: rgb(192, 70, 70);
}

.tabcard ul li.active {
    background: skyblue;
    color: red;
}

.tabcard ol li.active {
    display: flex;
}

1.1.4
下面是js的相关代码
（1）先加载到 下载下来的 jQuery方法库。
（2）然后在进行链式编程。

<script src="./jquery.min.js"></script>
<script>
//这里是给所有的ul下的li添加点击事件
$('.tabcard>ul>li').click(function () {
        //这里的this是被点击的标签本身
        //意思是：给当前被点击的标签添加 active 这个类名里的css样式
      $(this).addClass('active')
      //被点击标签的所有兄弟标签
      .siblings()
    //移出类名为 active 的CSS样式
    .removeClass('active')
    //当前被点击的li的直接父级
    .parent()
    //的下一个兄弟标签
    .next()
    //找到里面的li
    .find('li')
    //移出里面的 类名为active 的CSS样式
    .removeClass('active')
    //选择和当前被点击的ul 下的 li 相同的 ol 下的 li 添加样式 让其显示
    .eq($(this).index()).addClass('active');
    })

</script>

有不对的地方还望多多包涵指出。