获取隐藏的li标签宽度

//选项卡宽度获取,越界隐藏

function tabBottomwidth(){
	var liallwidth=0;
	var bottomwidth = $("#wid_header").width();
	var tabulwidth = $("#recent-tab").width();
	var $liNum = $("#recent-tab").find("li");
	$liNum.each(function(index){
		if($(this).css('display') =='block'){
			liallwidth += Number(parseFloat($(this).width()))
		}
	});
	if(bottomwidth - liallwidth >=100){
		$("#tab_btn").hide();
		$("#recent-tab").css({left:0});
	}
	else{
		$("#tab_btn").show();
	}
	 
好的,以下是一个基于jQuery实现同时展示多个tab标签和左右箭头滚动的示例代码: HTML部分: ```html <div class="tab-wrapper"> <div class="tab-scroll left-arrow"><i class="fa fa-chevron-left"></i></div> <div class="tab-container"> <ul class="tabs"> <li class="active"><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> <li><a href="#tab4">Tab 4</a></li> <li><a href="#tab5">Tab 5</a></li> <li><a href="#tab6">Tab 6</a></li> <li><a href="#tab7">Tab 7</a></li> </ul> </div> <div class="tab-scroll right-arrow"><i class="fa fa-chevron-right"></i></div> </div> ``` CSS部分: ```css .tab-wrapper { display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto; max-width: 800px; } .tab-scroll { position: absolute; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.8); cursor: pointer; opacity: 0.5; transition: opacity 0.2s ease; } .tab-scroll:hover { opacity: 1; } .left-arrow { left: 0; } .right-arrow { right: 0; } .tab-container { flex: 1; overflow: hidden; padding: 0 50px; } .tabs { display: flex; list-style: none; margin: 0; padding: 0; } .tabs li { margin-right: 20px; } .tabs li:last-child { margin-right: 0; } .tabs a { display: block; padding: 10px; border: 1px solid #ccc; border-bottom: none; background-color: #f9f9f9; color: #333; text-decoration: none; } .tabs a:hover { background-color: #e5e5e5; } .tabs .active a { border-color: #ccc; border-bottom: none; background-color: #fff; font-weight: bold; } ``` JavaScript部分: ```javascript $(document).ready(function() { // 将tab标签容器和tab标签项存储为变量 var tabContainer = $('.tab-container'); var tabs = $('.tabs li'); // 获取每个tab标签项的宽度 var tabWidth = tabs.outerWidth(); // 计算tab标签容器的总宽度 var totalWidth = tabWidth * tabs.length; // 将tab标签容器的总宽度设置为tab标签容器的宽度 tabContainer.css('width', totalWidth + 'px'); // 点击左箭头向左滚动tab标签 $('.left-arrow').click(function() { var scrollLeft = tabContainer.scrollLeft(); tabContainer.animate({scrollLeft: scrollLeft - tabWidth}, 200); }); // 点击右箭头向右滚动tab标签 $('.right-arrow').click(function() { var scrollLeft = tabContainer.scrollLeft(); tabContainer.animate({scrollLeft: scrollLeft + tabWidth}, 200); }); // 点击tab标签切换内容 tabs.click(function() { var tab = $(this); var target = $(tab.find('a').attr('href')); // 移除所有tab标签项的active类 tabs.removeClass('active'); // 添加当前点击的tab标签项的active类 tab.addClass('active'); // 隐藏所有内容 $('.tab-content').hide(); // 显示目标内容 target.show(); }); // 初始化第一个tab标签为active类 tabs.first().addClass('active'); // 显示第一个内容 $('#tab1').show(); }); ``` 这个示例代码中,我们首先将所有的tab标签项放在一个容器中,并将这个容器的宽度设置为所有tab标签项的宽度之和,这样就可以实现同时展示多个tab标签。然后,我们使用jQuery的scrollLeft()方法和animate()方法实现左右箭头的滚动效果。最后,我们使用jQuery的click()方法和addClass()方法、removeClass()方法和show()方法实现tab标签切换内容的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无公害的小bug

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值