tab栏切换

最新推荐文章于 2024-09-18 22:42:47 发布

爱喝奶茶的小韩

最新推荐文章于 2024-09-18 22:42:47 发布

阅读量582

点赞数 1

文章标签： js vue jquery

本文链接：https://blog.csdn.net/hanrabbit/article/details/111284253

版权

本文介绍了如何使用jQuery和Vue两种方法实现tab栏切换。在jQuery方案中，需要引入jQuery库并编写相应代码；而在Vue方案中，通过引入vant组件库，参照官方文档即可轻松实现。

摘要由CSDN通过智能技术生成

tab栏切换

1、jquery方式
首先引入 jquery.js 文件

<style type="text/css">
		    * {
		        margin: 0;
		        padding: 0;
		    }
		    ul {
		        list-style: none;
		    }
		    .wrapper {
		        width: 1000px;
		        height: 475px;
		        margin: 0 auto;
		        margin-top: 100px;
		    }
		    .tab {
		        border: 1px solid #ddd;
		        border-bottom: 0;
		        height: 36px;
		        width: 320px;
		    }
		    .tab li {
		        position: relative;
		        float: left;
		        width: 80px;
		        height: 34px;
		        line-height: 34px;
		        text-align: center;
		        cursor: pointer;
		        border-top: 4px solid #fff;
		    }	
		    .tab span {
		        position: absolute;
		        right: 0;
		        top: 10px;
		        background: #ddd;
		        width: 1px;
		        height: 14px;
		        overflow: hidden;
		    }
		    .products {
		        width: