几种项目中常用的tab选项卡切换

最新推荐文章于 2024-06-03 13:38:13 发布
最新推荐文章于 2024-06-03 13:38:13 发布
阅读量3k 收藏 12
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43766059/article/details/130706979
版权

一、上下布局，点击/滑动切换

        功能需求

                页面上方循环获取标签信息，超出屏幕宽度时可滑动，点击标签时，下方数据随标签切换，当前选中标签样式改变；页面下方可左右滑动切换，当前展示页面数据与上方标签相对应，要求当前页面高度根据获取数据列表长度改变，当前页面无数据时，按要求展示无数据提示。

                         

        需求分析

                超出屏幕宽度可滑动--使用<scroll-view>标签，标签内循环<div>展示数据（注：使用div绑定ref，使点击盒子一直显示在页面中）；每个循环的标签添加点击事件，盒子index赋值给currentIndex，传入对应数据；下方页面可左右滑动--使用<swiper>标签，去掉自动滚动、分页点，swiper高度随着传入数据多少变化，且选中标签样式改变，判断当选中标签接口中不存在数据时，展示无数据盒子。

        实现代码

                template

<div class="tabBox">
    <!--滚动条横向滚动，超过不折行-->
    <scroll-view scroll-x="true" style="white-space: nowrap;">
        <!--当前选中标签样式改变-->
        <div ref="tab" @click="itemClick(index)" class="tab-item" v-for="(item, index) of tabList" :key="index":class="currentIndex == index ? 'chosen-item' : '' ">
        {{ item.title }}
        </div>
    </scroll-view>
</div>
//页面下部分滑动用使用swiper
<swiper :indicator-dots="dot" :autoplay="auto" @change="slide" class="totalSwiper" :style="{height: swiperHeight+'px'}" id="swiper":current="currentIndex">
    //根据标签个数循环swiper滑块个数
    <swiper-item v-for="(item,index) in tabList" :key="index">
        //根据当前标签下是否有数据决定swiper状态
        <view class="signalSwiper" v-if="ifData">
            <view class="haveData">
                <view class="dataBox"v-for="(item,index) in showList":key="index">
                    <view class="boxLeft">
                        //icon是动态赋值背景图
                        <view class="boxIcon" :style="    
                           {backgroundImage:'url('+item.logo+')' }">
                        </view>
                    </view>
                    <view class="boxRight">
                        <view class="rightName">
                            <view class="boxTitle">{{item.title}}</view>
                            <view class="boxDate">{{item.createTime}}</view>
                        </view>
                        <view class="rightPrice">
                            <view class="boxNumber">{{item.account}}</view>
                            <view class="boxPrice">¥{{item.currentPrice/100}}                        
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        //该标签下无数据时展示该盒子
        <view class="noDataSwiper" v-if="nohaveData">
                <view class="noData">
                    <view class="failImg"></view>
                    <view class="failWord">暂无内容</view>
                </view>
        </view>
    </swiper-item>
</swiper>

                data

data() {
    return {
        //是否展示swiper轮播点
        dot: false,
        //swiper是否自动切换
        auto: false,
        //当前选中索引
        currentIndex: 0,
        //上个页面携带的选中标签类型
        chooseIndex: 0,
        //该标签下存在数据
        ifData: false,
        //该标签下不存在数据
        nohaveData: true,
        //用户ID
        userId: null,
        //当前选中的订单状态
        statusIndex: 0,
        //当前订单状态
        tabList: [{
            title: '全部',
            status: ''
        }, {
            title: '未付款',
            status: 0
        }, {
            title: '已支付',
            status: 1
        },{
            title: '支付失败',
            status: -1
        }, {
            title: '已完成',
            status: 2
        }],
        //展示当前页面优惠券信息
        showList: [],
        //swiper的高度
        swiperHeight: null,
			}
		}

                onLoad()

onLoad(option) {
    //上一页携带跳转参数，判断要展示的订单状态
    this.chooseIndex = parseInt(option.which)
},

                onReady()

//动态获取该页swiper的高度，实时更新
this.$nextTick(() => {
    setTimeout(() => {
        //首先根据上页携带参数选择展示标签以及对应数据
        this.itemClick(this.chooseIndex)
        //根据当前内容高度动态赋值
        this.getHeight()
		}, 300);
});

                methods   
 

//获取页面高度
    getHeight() {
        if (this.ifData == true) {  //如果该标签页有对应数据
          //当前swiper页面高度等于选中盒子内数据的高度
            this.$nextTick(() => {
            let infos = uni
			    .createSelectorQuery()
			    .in(this)
			    .select('.signalSwiper');
			infos.boundingClientRect(data => {
				this.swiperHeight = data.height
				}).exec();
			})
				} else if (this.nohaveData == true) { //如果该标签页没有对应数据
				    this.$nextTick(() => {
					let infos = uni
						.createSelectorQuery()
						.in(this)
						.select('.noDataSwiper');
					infos.boundingClientRect(data => {
						this.swiperHeight = window.innerHeight
						}).exec();
					})
				}
			},
			// 点击哪个让哪个出现在视野中
			itemClick(index) {
				this.currentIndex = index
				this.$refs.tab[this.currentIndex].scrollIntoView({
					block: 'nearest',
					inline: 'center'
				})
				this.showStatus(this.currentIndex)
			},
			slide(e) {
				this.currentIndex = e.detail.current
				this.$refs.tab[this.currentIndex].scrollIntoView({
					block: 'nearest',
					inline: 'center'
				})
				this.showStatus(this.currentIndex)
			},
			//获取当前选择的订单状态展示
			showStatus(index) {
				if (index == 0) {
					this.statusIndex = ''
					this.getDataList()
				} else if (index == 1) {
					this.statusIndex = 0
					this.getDataList()
				} else if (index == 2) {
					this.statusIndex = 1
					this.getDataList()
				} else if (index == 3) {
					this.statusIndex = -1
					this.getDataList()
				} else if (index == 4) {
					this.statusIndex = 2
					this.getDataList()
				}
			},
            //接口中获取选中列表数据，有数据展示，无数据则展示暂无内容（接口获取数据部分省略）
			getDataList() {
                this.showList = res.data.data.data
				if (this.showList.length != 0) {
				    this.nohaveData = false
				    this.ifData = true
				    this.getHeight()
					} else {
			    	    this.nohaveData = true
						this.ifData = false
						this.getHeight()
					}}

//改变swiper盒子节点高度的固定搭配 

let infos = uni .createSelectorQuery().in(this).select('.对应class名称');

//高度修改
infos.boundingClientRect(data => {
                this.swiperHeight = data.height
      }).exec();

链接详见🔗：

uni.createSelectorQuery() | uni-app官网

                style

<style lang="scss" scoped>
	.tabBox {
		height: 200rpx;
		overflow-x: scroll;
		overflow-y: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;

		// 去掉滑动进度条
		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.tab-item {
			height: 80rpx;
			width: 160rpx;
			text-align: center;
			flex-shrink: 0;
			display: inline-block;
			margin-left: 30rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #545454;
		}

		.chosen-item {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			margin-left: 30rpx;
			border-bottom: #FF3B79 solid 4rpx;
		}
	}

	.totalSwiper {
		width: 100%;
		text-align: center;

		.signalSwiper {
			width: 686rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin: 0 auto;

			.dataBox {
				width: 686rpx;
				height: 144rpx;
				background: #FAFAFA;
				border-radius: 24rpx;
				margin: 20rpx auto;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.boxLeft {
					margin-left: 30rpx;

					.boxIcon {
						width: 96rpx;
						height: 96rpx;
						border-radius: 16rpx;
						background-size: 96rpx 96rpx;
					}

				}

				.boxRight {
					display: flex;
					justify-content: space-between;
					flex: 1;
					margin: 0 30rpx;

					.rightName {
						height: 120rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: flex-start;

						.boxTitle {
							font-size: 26rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #060606;
						}

						.boxDate {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #9E9EA5;
						}
					}

					.rightPrice {
						height: 120rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: flex-end;

						.boxNumber {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777777;
						}

						.boxDate {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #9E9EA5;
						}
					}
				}
			}

		}

		.noDataSwiper {
			width: 686rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin: 0 auto;

			.failImg {
				width: 480rpx;
				height: 420rpx;
				background: url('../../static/img_placeholder_order.png');
				background-size: 480rpx 420rpx;
				margin: 160rpx auto;
			}

			.failWord {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9999a6;
				line-height: 36rpx;
			}
		}
	}
</style>

二、左右布局，tab全部展示在页面左侧，点击切换对应分类

        功能需求

                全部分类展示在页面左侧，点击对应的标签，右侧出现该分类下的优惠券。仅支持点击切换。

        需求分析

                左侧tab栏展示接口中获取到的全部标签，点击传入选中ID，右侧展示选中ID的所有优惠券 。

        实现代码

                     template                

<view class="bottomContent">
    <view class="leftContent">
        <scroll-view scroll-y="true">
            <view class="oneTab" v-for="(item,index) in tabList" :key="index"   @click="choose(item.id,index)":class="chosenTab == item.id?'chosenTab':''">
                {{item.title}}
            </view>
        </scroll-view>
    </view>
    <view class="rightContent">
        <view class="singleBox" v-for="(item,index) in getApp" :key="index" @click="goApp(item.id)">
            <view class="singleIcon" :style="{backgroundImage: 'url('+item.cover+')' }"></view>
            <view class="singleTitle">{{item.title}}</view>
        </view>
    </view>
</view>

                data

data() {
    return {
        //分类列表
        tabList: [],
        //选中分类
        chosenTab: 0,
        //选中标签
        chosenId: 0,
        //每个分类中获取到的数据
        getApp: [],
        //点击软件获取到的数据
        getCoupon: [],
        //软件展示列表
        appList: []
    }
},

               methods

//选择分类tab
choose(whichType, which) {
    this.chosenTab = whichType
    this.chosenId = which
    uni.request({
        url: '获取分类下展示的apps',
        method: "GET",
        header: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        data: {
           //传入对应数据
        },
        success: (res) => {
            if (res.data.code == 200) {
                this.getApp = res.data.data
            }
        }
    })
},
//跳转到分类下面的app
goApp(whichApp) {
    uni.request({
        url: '跳转到选中优惠券的规格选择页',
        method: "GET",
        header: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        data: {
            //传入对应数据    
        },
        success: (res) => {
            if (res.data.code) {
                this.getCoupon = res.data.data
            }
        }
    })
},

       style

	.bottomContent {
			width: 100%;
			display: flex;
			// justify-content: space-between;

			.leftContent {
				width: 192rpx;
				height: 1100rpx;
				background: #F5F6F8;

				.oneTab {
					width: 100%;
					height: 96rpx;
					line-height: 96rpx;
					text-align: center;
					margin: 20rpx auto;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #7B7B7B;
				}

				.chosenTab {
					width: 100%;
					height: 96rpx;
					line-height: 96rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					background-color: #fff;
					font-weight: 500;
					color: #2F2F31;
					border-left: 2px solid red;
				}
			}

			.rightContent {
				width: 558rpx;
				height: 50%;
				margin-top: 50rpx;
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-between;
				align-items: flex-start;

				.singleBox {
					width: 120rpx;
					height: 150rpx;
					margin-left: 47rpx;
					margin-bottom: 15rpx;
					// margin-top: 50rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.singleIcon {
						width: 96rpx;
						height: 96rpx;
						border-radius: 24rpx;
						background-size: 96rpx 96rpx;
						margin-bottom: 5rpx;
					}

					.singleTitle {
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #2A2A2F;
					}
				}
			}
		}

三、上下布局，点击标签页面自动滑动到对应模块，页面内锚点定位

        功能需求

                页面上方循环获取标签信息，超出屏幕宽度时可滑动，点击标签时，当前选中标签样式改变，下方数据盒子随之滑动；标签对应分类盒子展示在页面正中间。

        需求分析

                 超出屏幕宽度可滑动--使用<scroll-view>标签，标签内循环<div>展示数据（注：使用div绑定ref，使点击盒子一直显示在页面中）；监听页面，当页面停止滚动时，当前页面中央展示盒子对应顶部标签高亮；点击上方标签时，使其对应数据盒子平滑滑动到当前页面中央。

        实现代码

                template

<div class="tabBox">
    <scroll-view scroll-x="true" style="white-space: nowrap;">
        <div ref="tab" class="tab-item" :class="{'isActive': index==navgatorIndex}"
@click="handleLeft(index)" v-for="(item,index) in allInfoList" :key="index">
		    {{ item.title }}
		</div>
	</scroll-view>
</div>
<view class="bottomContent">
    <div class="allGoods" :id="'id'+index" v-for="(item,index) in allInfoList" :key="index">
        <view class="boxTitle">{{item.title}}</view>
        <view class="goodsList">
            <view class="goods" v-for="(item,cindex) in allInfoList[index].goods" :key="cindex" @click="goGoods(item.id)">
            <view class="goodsPic" :style="{backgroundImage:'url(' +item.cover + ')'}"></view>
				<view class="goodsTitle">{{item.title}}</view>
				<view class="goodsButton">
					<view class="currentPrice">
                    <text style="font-size: 28rpx; margin-right:6rpx;">¥</text>
					{{ item.currentPrice }}
					</view>
					<view class="originalPrice">¥{{ item.originalPrice/100 }</view>
					<view class="rightBox"></view>
				</view>
			</view>
		</view>
    </div>
</view>

                data

data() {
    return {
		//当前选中导航索引
		navgatorIndex: 0,
		//点击导航栏时，暂时停止监听页面滚动
		listBoxState: true,
		//分类商品盒子
		allInfoList: [],
		//每个盒子内的商品
		goodsList: [],
		//缓存中用户ID
		userId: null,
		//缓存中的手机号
		phoneNumber: null,
	};
},

                mounted

mounted() {
	let timeId;
	window.addEventListener('scroll', () => {
	// 页面滚动停止100毫秒后才会执行下面的函数。
	clearTimeout(timeId);
	timeId = setTimeout(() => {
		this.scrollToTop();
	}, 100);
}, true);
},

                methods

// 点击导航菜单，页面滚动到指定位置
handleLeft(index) {
    this.navgatorIndex = index;
    this.$el.querySelector(`#id${index}`).scrollIntoView({
		behavior: "smooth", // 平滑过渡
		block: "end" // 下边框与视窗顶部平齐
	});
	this.listBoxState = false;
	let timeId;
	clearTimeout(timeId);
	timeId = setTimeout(() => {
		this.listBoxState = true;
	}, 200);
},
// 监听页面元素滚动，改变导航栏选中
scrollToTop() {
	// 获取视窗高度
	var domHight = document.body.offsetHeight;
	// dom滚动位置
	var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
	if (this.listBoxState) { //作用是点击导航栏时，延迟这里执行。
		this.allInfoList.map((v, i) => {
		// 获取监听元素距离视窗顶部距离
		var offsetTop = document.getElementById(`id${i}`).offsetTop - 400;
		// 获取监听元素本身高度
		var scrollHeight = document.getElementById(`id${i}`).scrollHeight;
		// 如果 dom滚动位置 >= 元素距离视窗距离 && dom滚动位置 <= 元素距离视窗距离+元素本身高度
		// 则表示页面已经滚动到可视区了。
		if (scrollTop >= offsetTop && scrollTop <= (offsetTop + scrollHeight)) {
			// 导航栏背景色选中
			this.navgatorIndex = i;
			//滑动对应选中的tab在屏幕中央展示
			this.$refs.tab[this.navgatorIndex].scrollIntoView({
				block: 'nearest',
				inline: 'center'
			})
		}
	    })
    }
},

                style

.tabBox {
	width: 100%;
	overflow-x: scroll;
	overflow-y: auto;
	display: flex;
	align-items: center;
	position: fixed;
	background-color: #FF5B4C;
    // 去掉滑动进度条
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.tab-item {
    	height: 80rpx;
    	width: 160rpx;
		text-align: center;
		flex-shrink: 0;
		display: inline-block;
		margin-left: 30rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.8);
	}

	.isActive {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		border-bottom: #FFFFFF 2px solid;
	}
}

.bottomContent {
	width: 750rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.allGoods {
		width: 702rpx;
		background: rgba(255, 239, 225, 0.3);
		border-radius: 32rpx;
		border: 2rpx solid rgba(255, 220, 201, 0.3);
		position: relative;
		margin-bottom: 70rpx;

		.boxTitle {
			width: 420rpx;
			height: 144rpx;
			background: url('../../static/img_title_1@2x.png') no-repeat;
			background-size: 420rpx 144rpx;
			position: absolute;
			left: 142rpx;
			top: -38rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}

		.goodsList {
			width: 670rpx;
			display: flex;
			flex-wrap: wrap;
			margin: 66rpx auto 16rpx;

			.goods {
				width: 212rpx;
				height: 328rpx;
				background: #FDF7F2;
				border-radius: 16rpx;
				border: 1px solid #FFE0C5;
				margin: 0 5rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.goodsPic {
					width: 212rpx;
					height: 212rpx;
					background-size: 212rpx 212rpx;
					border-radius: 16rpx 16rpx 0 0;
				}

				.goodsTitle {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #060606;
					margin-left: 10rpx;
				}

				.goodsButton {
					width: 202rpx;
					height: 48rpx;
					background: linear-gradient(135deg, #FF5B4C 0%, #FF3B79 100%);
					border-radius: 14rpx;
					margin: 8rpx auto;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.currentPrice {
						font-size: 40rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #FFFFFF;
					}

					.originalPrice {
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(255, 255, 255, 0.8);
						text-decoration: line-through;
						margin-left: -30rpx;
					}

					.rightBox {
						width: 32rpx;
						height: 32rpx;
						background: url('../../static/icon_arrows_right@2x (1).png') no-repeat;
						background-size: 32rpx 32rpx;
					}
			    }
		    }
		}
	}
}

抬杠冠军选手
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tab切换的两种方式
HILL_9的博客
06-28 4059
顾名思义首先引用jQuery.js了 <script src="/UI/Scripts/jquery-1.11.3.min.js"></script> 1、第一种tab切换方式 //样式 #datalist { width:110px; height:650px; float:left; margin-left:2px; border:1px solid #ddd; } .department { text-align:center; heig
Tab切换以及缓存页面处理的几种方式
小分享
11-06 6287
前言 相信tab切换对于大家来说都不算陌生，后台管理系统中多会用到。如果不知道的话，可以看一下浏览器上方的标签页切换，大概效果就是这样。 1.如何切换 使用动态组件,相信大家都能看懂（部分代码省略） //通过点击就可以实现两个组件来回切换 <button @click="changeView">切换view</button> <component :i...
uniapp组件之tab选项卡滑动切换功能实现 vue2版本+vue3版本
最新发布
weixin_42220130的博客
06-03 974
uniapp组件之tab选项卡滑动切换功能实现，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧。
三种方法实现tab栏切换（CSS方法、JS方法、Vue方法）
lbcbjtlhmjq的博客
08-08 6009
给下图的静态页面添加tab栏切换效果。
JS实现淡蓝色简洁竖向Tab点击切换效果
10-23
主要介绍了JS实现淡蓝色简洁竖向Tab点击切换效果,通过JavaScript相应鼠标事件实现非常简单的css样式切换,简单实用,需要的朋友可以参考下
Tab栏切换
qq_61838861的博客
02-06 7828
1.将tab栏分为上下两部分，上面是导航栏，下面是各部分对应的内容。 2.tab栏导航栏部分，点击后样式改变，比如字体颜色、背景颜色改变 ①定义一个类名：current，改变后的样式，先给第一个写该类名，其他的不写类名 ②js获取所有对象，利用for循环遍历给每个对象绑定点击事件,并且设置属性index ③排他算法：利用for循环将所有对象设置类名为空，被点击的对象设置类名current 3.点击不同对象，出现不同的内容 ①定义一个类名：items，其他的都隐藏起来 ②获取全部对象，获取点击对象的索
tab栏切换的实现
zhaoyifei01的博客
02-11 3671
tab栏切换
简单的tab选项卡切换
weixin_44543219的博客
01-31 8526
Tab选项卡切换 我们在网页上经常能看到的一个现象点击某一文字就会跳转出宁一个页面、而在同一个页面中点击头部内容，主体内容也会随之改变。前者是a 标签所实现的效果，而后者则是tab选项卡的切换。接下来我们一起来看看tab选项卡怎么个切换方法： 这是tab选项卡切换的源代码，由于内容较多，所以只截取了大...
tab栏的切换【html+css+js】
m0_69892739的博客
01-06 1000
【代码】tab栏的切换【html+css+js】
CSS tab选项卡切换特效代码
03-20
在本案例中，"CSS tab选项卡切换特效代码"是一个纯CSS实现的交互式组件，主要用于提供一种用户友好的界面，让用户能够轻松地在多个视图之间切换，比如在不同的内容板块之间进行导航。 这种CSS选项卡切换效果通常...
jQuery简单实现tab选项卡切换效果
11-22
标题中的“jQuery简单实现tab选项卡切换效果”指的是使用JavaScript库jQuery来创建一个常见的网页交互功能，即选项卡切换。这种效果通常用于展示有限的、分组的内容，用户可以通过点击不同的选项卡来查看不同的内容...
Vue.js tab实现选项卡切换
10-19
选项卡切换是用户界面设计中常见的一种交互方式，它允许用户在多个视图或内容之间进行切换，而这些内容通常被组织在一个有限的空间内。 在Vue.js中，我们可以创建自定义组件来复用代码并提高代码的可维护性。在给出...
jQueryTAB选项卡切换幻灯片特效.zip
07-11
在"jQuery TAB选项卡切换幻灯片特效"的代码中，你可能会看到类似`.tabs`（选项卡容器）、`.tab-content`（内容容器）、`.active`（选中状态类）这样的选择器，以及`slideToggle()`（切换显示/隐藏）和`setTimeout()`...
jQuery点击切换Tab标签选项卡代码
06-24
本篇文章将深入讲解如何使用jQuery来创建一个点击切换的Tab选项卡系统，并探讨相关的核心知识点。 首先，我们需要理解jQuery的基本用法。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画...
tab栏的切换
qq_51985469的博客
06-24 615
首先将第一部分加上active类名，第二部分保持原样，接下来我们仅仅需要添加和删除类名就能实现标题类的切换。那么现在就可以对下面的内容进行对应的隐藏比如点击的是第一个，那么其他元素的display为none。2.循环遍历先把需要的active类名移除，在对点击的这个元素添加上active类名。切换tab 栏本质上是利用了排它思想。如此就实现了tab栏切换的效果。此时就可以实现标题栏的切换。
前端项目实践案例——制作Tab选项卡点击切换效果
shhghvvh的博客
11-23 3221
制作Tab选项卡点击切换效果
实现tab选项卡的几种方式
小白小白从不日别的博客
04-30 3646
主要讲述了利用JS实现tab栏的几种方式
Tab栏切换案例
Joeyyy126的博客
07-28 2007
关于tab栏切换案例的思路记录
案例：tab 栏切换
icemwj的博客
09-21 8487
案例：tab 栏切换（重点案例） 业务需求： 当鼠标点击上面相应的选项卡（tab），下面内容跟随变化。 案例分析： （1）Tab 栏切换有2个大的模块。 （2）上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） ，修改类名的方式。 （3）下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。 （4）规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。 （5）核心思路：给上面的 tab_list 里面的所有小 li 添加自定义属性，属性值从0开始编号。 （6
js实现tab选项卡切换
05-30
好的，以下是一个简单的JavaScript实现选项卡切换的示例代码： HTML部分： ```html <div class="tab-container"> <div class="tab-header"> <div class="tab" onclick="openTab(event, 'tab1')">选项卡1</div> <div class="tab" onclick="openTab(event, 'tab2')">选项卡2</div> <div class="tab" onclick="openTab(event, 'tab3')">选项卡3</div> </div> <div class="tab-content"> <div id="tab1" class="tab-pane active">选项卡1的内容</div> <div id="tab2" class="tab-pane">选项卡2的内容</div> <div id="tab3" class="tab-pane">选项卡3的内容</div> </div> </div> ``` CSS部分： ```css .tab-container { border: 1px solid #ccc; border-radius: 5px; overflow: hidden; } .tab-header { display: flex; } .tab { padding: 10px 20px; background-color: #f0f0f0; cursor: pointer; border-right: 1px solid #ccc; border-bottom: none; user-select: none; } .tab:last-child { border-right: none; } .tab.active { background-color: #fff; } .tab-content { padding: 20px; } .tab-pane { display: none; } .tab-pane.active { display: block; } ``` JavaScript部分： ```javascript function openTab(evt, tabName) { // 获取所有选项卡和对应内容的元素 var tabs = document.getElementsByClassName("tab"); var tabPanes = document.getElementsByClassName("tab-pane"); // 隐藏所有内容 for (var i = 0; i < tabPanes.length; i++) { tabPanes[i].style.display = "none"; } // 取消所有选项卡的激活状态 for (var i = 0; i < tabs.length; i++) { tabs[i].classList.remove("active"); } // 显示当前选项卡对应的内容和激活当前选项卡 document.getElementById(tabName).style.display = "block"; evt.currentTarget.classList.add("active"); } ``` 以上代码实现了一个简单的选项卡切换，点击选项卡可以切换对应的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值