tab切换组件，可横向自适应滑动
示例图：
注：需要引入Jquery
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.tabs-box {width: 100%;height: auto;}.tab-header-box {display: flex;overflow: hidden;position: relative;border-bottom: 1px solid #aab7b8;background: #fff;}.tab-header-box>span {display: flex;margin: 12px 0;z-index: 1;color: #545b64;line-height: 22px;display: none;padding: 8px 0;align-items: center;}.tab-header-box.scroll>span {display: flex;background-color: #fff;}.tab-header-box .scroll-left {position: inherit;border-right: 1px solid #d5dbdb;box-shadow: 5px 0 4px -3px #eaeded, 1px 0 0 0 #eaeded;}.tab-header-box .scroll-right {position: absolute;right: 0;top: 0;border-left: 1px solid #d5dbdb;box-shadow: -5px 0 4px -3px #eaeded, -1px 0 0 0 #eaeded;}.tab-header-box>span.disable {color: #d5dbdb;border-color: #d5dbdb;}.tab-header-box>span i {padding: 4px;}.tab-header {display: flex;padding: 0;margin: 0;color: #545b64;overflow: visible;flex-wrap: nowrap;position: relative;}.tab-header li {padding: 12px 0;margin: 0;line-height: 22px;list-style: none;font-weight: 700;font-size: 14px;}.tab-header li.active {border-bottom: 2px solid #16191f;color: #0073bb;}.tab-header li span {padding: 4px 20px;border-left: 1px solid #aab7b8;align-items: center;display: flex;min-inline-size: 0;position: relative;text-align: start;word-break: keep-all;}.tab-header li:first-child span {border-left: 0;}.tab-content,.tab-content-box {padding: 16px 0;background: #f1f1f1;}.tab-content-box>div {display: none;}.tab-content-box>div.show {display: block;}</style><script type="text/javascript" src="jq.js"></script></head><body><div class="tabs-box"><div class="tab-header-box"><span class="scroll-left"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"class="bi bi-chevron-left" viewBox="0 0 16 16"><path fill-rule="evenodd"d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" /></svg></span><ul class="tab-header"><li class="active"><span>tab1</span></li><li><span>tab1</span></li><li><span>tab1</span></li><li><span>tab1</span></li><li><span>访问控制的属性</span></li><li><span>访问控制的属性</span></li><li><span>访问控制的属性</span></li><li><span>访问控制的属性</span></li><li><span>访问控制的属性</span></li><li><span>访问控制的属性</span></li><li><span>访问控制的属性</span></li></ul><span class="scroll-right"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd"d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" /></svg></span></div><div class="tab-content"><div class="tab-pane">内容</div></div><div class="tab-content tab-content-box"><div class="tab-pane0 show">内容1</div><div class="tab-pane1">内容2</div><div class="tab-pane2">内容3</div><div class="tab-pane3">内容1</div><div class="tab-pane4">内容2</div><div class="tab-pane5">内容3</div><div class="tab-pane6">内容1</div><div class="tab-pane7">内容2</div><div class="tab-pane8">内容3</div><div class="tab-pane9">内容1</div><div class="tab-pane10">内容2</div></div></div><p id="two"><span class="onw-s"></span></p><div></div></body>
</html>
<script>$(document).ready(function() {let initialBoxWidth = Number($('.tab-header-box').css('width').split('px')[0]);printTab()window.onresize = function() {printTab()}function printTab() {let obj = countLeft()// obj.boxWidth > initialBoxWidth 说明窗口在增大if (obj.tabWidth > obj.boxWidth) {$('.tab-header-box').addClass('scroll')obj.sWidth > 0 ? $('.scroll-left').removeClass('disable') : $('.scroll-left').addClass('disable')if (obj.left !== 0) {$('.scroll-right').removeClass('disable')console.log(obj.boxWidth, initialBoxWidth)if (obj.boxWidth > initialBoxWidth) {let newLeft = obj.left - (obj.boxWidth - initialBoxWidth);$('.tab-header').css('left', -newLeft + 'px')}} else {$('.scroll-right').addClass('disable')}} else {$('.tab-header-box').removeClass('scroll')$('.scroll-left').addClass('disable')$('.scroll-right').addClass('disable')$('.tab-header').css('left', '0px')}initialBoxWidth = obj.boxWidth}// 向左移动$(document).on('click', '.scroll-left', function() {if ($(this).hasClass('disable')) {return false}let obj = countLeft()if (obj.sWidth > obj.boxWidth) {let newLeft = obj.left + obj.boxWidth;$('.tab-header').css('left', -newLeft + 'px')} else {$('.scroll-right').removeClass('disable')$('.scroll-left').addClass('disable')let newLeft = obj.left + obj.sWidth + obj.spanWidth + obj.spanWidth;$('.tab-header').css('left', -newLeft + 'px')}})// 向右移动$(document).on('click', '.scroll-right', function() {if ($(this).hasClass('disable')) {return false}let obj = countLeft()if (obj.left > obj.boxWidth) {let newLeft = obj.left - obj.boxWidth;$('.tab-header').css('left', -newLeft + 'px')} else {$('.scroll-right').addClass('disable')$('.scroll-left').removeClass('disable')$('.tab-header').css('left', '0px')}})function countLeft() {let tabWidth = Number($('.tab-header').css('width').split('px')[0]), //tab列表宽度boxWidth = Number($('.tab-header-box').css('width').split('px')[0]), //tab父级盒子的宽度left = Math.abs(Number($('.tab-header').css('left').split('px')[0])), //tab的定位left值spanWidth = Number($('.scroll-right').outerWidth()), //向左向右按钮宽度sWidth = tabWidth - left - boxWidth; //剩余可向左移动的宽度return {'tabWidth': tabWidth,'boxWidth': boxWidth,'left': left,'spanWidth': spanWidth,'sWidth': sWidth}}// tab切换事件$(document).on('click', '.tab-header li', function() {// 多个内容区时let index = $(this).index()$.each($('.tab-content-box>div'), function(index, el) {$(el).removeClass('show')})$('.tab-content-box>div').eq(index).addClass('show')// end$.each($('.tab-header li'), function(index, el) {$(el).removeClass('active')})$(this).addClass('active')})})
</script>相关文章：
tab切换组件，可横向自适应滑动
示例图： 注：需要引入Jquery <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>.tabs-box {width: 100%;height: auto;}.tab-header-box {display: flex;overflow: hidden…...
设计模式---单例模式
目录 一、五种单例模式的实现方式 1.饿汉模式 2.饿汉枚举类型 3.懒汉式 4.双检锁懒汉式 5.内部类懒汉式 二、JDK 中单例的体现 一、五种单例模式的实现方式 1.饿汉模式 public class Singleton1 implements Serializable {private Singleton1() {if (INSTANCE ! null) {thro…...
HarmonyOS 应用开发之启动/停止本地PageAbility
启动本地PageAbility PageAbility相关的能力通过featureAbility提供，启动本地Ability通过featureAbility中的startAbility接口实现。 表1 featureAbility接口说明 接口名接口描述startAbility(parameter: StartAbilityParameter)启动Ability。startAbilityForRes…...
BaseDao封装增删改查
文章目录 什么是BaseDao操作代码增删改查询单个数据查询多个数据 总结 什么是BaseDao BaseDao是： 数据库里负责增加，删除，修改，查询 具体来说是一种接口代码,公共方法的接口类。 在dao层新建basedao,其他dao层接口继承basedao 相…...
Redis入门到实战-第十三弹
Redis入门到实战 Redis中JSON数据类型常见操作官网地址Redis概述JSON常见操作更新计划 Redis中JSON数据类型常见操作 完整命令参考官网 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 Redis是…...
深度学习InputStreamReader类
咦咦咦，各位小可爱，我是你们的好伙伴——bug菌，今天又来给大家普及Java SE相关知识点了，别躲起来啊，听我讲干货还不快点赞，赞多了我就有动力讲得更嗨啦！所以呀，养成先点赞后阅读的好…...
2023年后端面试总结
备注：这篇文章是我在2023年年初在自己的网站上写的，最近在迁移技术文章，我感觉这个也是和咱程序员相关，所以今天就决定把它迁移过来。 .......................................................................分割线..........…...
axios实现前后端通信报错Unsupported Media
使用axios向SpringBoot的后端使用post请求发送数据，发现报错Unsupported Media，最终解决方案如下： 检查变量名字是否一样，即前端传给后端的json数据键名要与后端接收的对象的成员变量名字一致检查Content-Type，post请…...
网络套接字补充——TCP网络编程
六、TCP网络编程 6.1IP地址字符串和整数之间的转换接口 //字符串转整数接口 #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> int inet_aton(const char *cp, struct in_addr *inp); int inet_pton(int af, const char *strptr, …...
Nginx-记
Nginx是一个高性能的web服务器和反向代理服务器，用于HTTP、HTTPS、SMTP、POP3和IMAP协议。因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。 （1）更快 这表现在两个方面：一方面，在正常情况下&…...
JS面试题：call,apply,bind区别
1. 共同点 三者共同点都是改变函数内部this指向的方法 2. call用法 ini 复制代码 var a 2; var b 2; function func() { console.log(this.a, this.b) } let obj { a: 1, b: 1 } func.call(obj) func.call() 输出结果： 复制代码 1 1 2 2 解析࿱…...
Charles抓包配置代理手机连接
Charles下载地址： Charles_100519.zip官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘123云盘为您提供Charles_100519.zip最新版正式版官方版绿色版下载,Charles_100519.zip安卓版手机版apk免费下载安装到手机,支持电脑端一键快捷安装https://www.123pan.com…...
NA555、NE555、SA555和SE555系列精密定时器
这份文件是关于德州仪器（Texas Instruments）生产的NA555、NE555、SA555和SE555系列精密定时器（Precision Timers）的数据手册。以下是该文件的核心内容概述： 产品特性： 德州仪器的NA555、NE555、SA555和SE55…...
黑马鸿蒙笔记2
1.图片设置： 1 加载网络图片，申请权限。 申请权限：entry - src - resources - module.json5 2 加载本地图片 ,两种加载方式 API 鼠标悬停在Image， 点击show in API Reference interpolation：看起来更加清晰 resou…...
微信小程序uniapp+vue3+ts+pinia的环境搭建
一.创建uniapp项目 通过vue-cli创建 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project二.安装依赖： 1.pnpm i 2.运行项目： 将package.json的 "dev:mp-weixin": "uni -p mp-weixin",改为 "serve": "u…...
MongoDB聚合运算符：$let
文章目录 MongoDB聚合运算符：$let语法使用举例 MongoDB聚合运算符：$let $let聚合运算符绑定用于表示计算的变量，并返回表达式的结果。 语法 {$let:{vars: { <var1>: <expression>, ... },in: <expression>} }vars 用于在…...
HarmonyOS像素转换-如何使用像素单位设置组件的尺寸。
1 卡片介绍 基于像素单位，展示了像素单位的基本知识与像素转换API的使用。 2 标题 像素转换（ArkTS） 3 介绍 本篇Codelab介绍像素单位的基本知识与像素单位转换API的使用。通过像素转换案例，向开发者讲解了如何使用像素单位设…...
【前端面试3+1】05v-if和v-show的区别、v-if和v-for能同时使用吗、Vuex是什么？【合并两个有序链表】
一、v-if和v-show的区别 v-if 和 v-show 是 Vue.js 中用来控制元素显示与隐藏的指令。 1.v-if： v-if 是根据表达式的真假值来决定是否渲染元素。当表达式为真时，元素会被渲染到 DOM 中；当表达式为假时，元素不会被渲染到 DOM 中。每…...
Unity WebRequest 变得简单
作者简介： 高科，先后在 IBM PlatformComputing从事网格计算，淘米网，网易从事游戏服务器开发，拥有丰富的C++，go等语言开发经验，mysql，mongo，redis等数据库，设计模式和网络库开发经验，对战棋类，回合制，moba类页游，手游有丰富的架构设计和开发经验。 （谢谢你的关注…...
vue 窗口内容滚动到底部
onMounted(() > {scrollToBottom() }) // 滚动到底部方法 const scrollToBottom () > {// 获取聊天窗口容器let chatRoom: any document.querySelector(".chat-content");// 滚动到容器底部chatRoom.scrollTop chatRoom.scrollHeight; } 效果 聊天窗口代码…...
三维GIS开发cesium智慧地铁教程（5）Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点： 路径验证：确保相对路径.…...
Robots.txt 文件
什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...
适应性Java用于现代 API：REST、GraphQL 和事件驱动
在快速发展的软件开发领域，REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名，不断适应这些现代范式的需求。随着不断发展的生态系统，Java 在现代 API 方…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板（STM32F103RBT6）通过I2C驱动ICM20948九轴传感器，实现姿态解算，并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化，适合嵌入式及物联网开发者。在基础驱动上新增…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机，交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息，系统版本：Ubuntu22.04.5 LTS；内核版本…...
第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）
第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10pip3.10） 一：前言二：安装编译依赖二：安装Python3.10三：安装PIP3.10四：安装Paddlepaddle基础框架4.1…...
基于 HTTP 的单向流式通信协议SSE详解
SSE（Server-Sent Events）详解 🧠 什么是 SSE？ SSE（Server-Sent Events） 是 HTML5 标准中定义的一种通信机制，它允许服务器主动将事件推送给客户端（浏览器）。与传统的 H…...
sql列中数据通过逗号分割的集合，按需求剔除部分值
前置 不会REGEXP 方法的需要在这里学习一下下 记sql字段逗号分隔，通过list查询 功能点 现有一个表格中一列存储的是标签的集合，通过逗号分割 入下： 其中tag_ids是逗号分割的标签，现在需要删除标签组中的一些标签，因…...