标签：bottom H5 PC 切换 tab 组件

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>

总结

标签：bottom,H5,PC,切换,tab,组件
来源： https://blog.csdn.net/wang159477/article/details/120979147

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。