tab切换适用于H5和PC不借助任何组件

文章目录

• tab切换适用于H5和PC不借助任何组件
• 前言
• 一、代码步骤
• 总结

---

前言

以下就是今天要讲的内容，本文仅仅简单介绍了自己经常在项目会用到tab切换，但是又不想组件，所以就自己做了一个，希望对看到的同行有帮助。

---

提示：以下是本篇文章正文内容，下面案例可供参考使用

一、代码步骤

代码如下（示例）：

 <!--tab-->
    <div>
      <ul class="tabsbox">
        <li @click="cur = 0" :class="{ active: cur == 0 }">实物信息</li>
        <li @click="cur = 1" :class="{ active: cur == 1 }">技术信息</li>
        <li @click="cur = 2" :class="{ active: cur == 2 }">中国准则</li>
        <li @click="cur = 3" :class="{ active: cur == 3 }">税务准则</li>
        <li @click="cur = 4" :class="{ active: cur == 4 }">其他信息</li>
      </ul>
      <div class="tab-contents">
        <div v-show="cur == 0">实物信息</div>
        <div v-show="cur == 1">技术信息</div>
        <div v-show="cur == 2">中国准则</div>
        <div v-show="cur == 3">税务准则</div>
        <div v-show="cur == 4">其他信息</div>
      </div>
    </div>
		 data() {
		    //这里存放数据
		    return {
		      cur: 0,//初始值
		    };
		  },
		  <style  scoped>
		  /* tab栏切换 */
.tabsbox {
  overflow: hidden;
  margin-top: 10px;
}
.tabsbox > li {
  float: left;
  width: 20%;
  background: #fff;
  text-align: center;
  border-bottom: 1.5px solid #e5e5e5;
  font-size: 12px;
  line-height: 50px;
  border-bottom: 1.5px solid transparent;
}
.tabsbox>li.active {
  /* color: #E93637; */
  border-bottom: 3px solid #e93637;
}
.tab-contents {
  margin-top: 10px;
  width: 100%;
  height: 300px;
  background: #fff;
  padding: 12px;
  margin-bottom: 60px;
}
</style>

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了自己经常在项目会用到，但是又不想组件，所以就自己做了一个，希望对看到的同行有帮助