Query选项卡注意

最新推荐文章于 2025-12-05 08:37:05 发布
原创 最新推荐文章于 2025-12-05 08:37:05 发布 · 181 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#xhtml #javascript #ViewUI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery选项卡</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#bg {
position:absolute;
top:0px;
left:0px;
z-index:-999;
}
</style>
<script type="text/javascript" src="file:///C|/Documents and Settings/Administrator/桌面/jquery-1.7.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){

$("#hello li").hover(function(){
$(this).css("border","1px dashed #FD52AA");
alert($(this).index());
},function(){
$(this).css("border","0px outset #000");

})
});
</script>
</head>
<body id="background">
<div id="hello">
<li>新闻1内容~~</li>
<li>新闻2内容~~</li>
<li>新闻3内容~~</li>
<li>新闻4内容~~</li>
<li>新闻5内容~~</li>
<li>新闻6内容~~</li>
<li>广告1内容~~</li>
</div>
<div id="hello">
<li>新闻1内容~~</li>
<li>新闻2内容~~</li>
<li>新闻3内容~~</li>
<li>新闻4内容~~</li>
<li>新闻5内容~~</li>
<li>新闻6内容~~</li>
<li>广告1内容~~</li>
</div>
</body>
Query选项卡（仿腾讯迷你页）
炉火纯青
12-02 1944
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><script type="text/javascript" src="http://www.liehuo.net/uplo
jquery 实现选项卡功能
hugejihu9的专栏
10-17 4053
文章来自：源码在线https://www.shengli.me/jquery/63.html   代码实现：   html代码 css代码   脚本jQuery代码：   注：要提前引入jquery文件；    
antd vue Tabs控件的使用
qiulei_21的专栏
03-09 7013
antd vue中tabs控件的使用，以及结合component元素、KeepAlive、nextTick的使用
一行代码实现jq选项卡切换
天下大师傅
06-15 5032
$('.queryNav li').click(function() {     $('.content').children().eq($(this).index()).show().siblings('.queryContent').hide(); });
EasyUI Tabs全攻略
c657826604的博客
05-05 5702
主要涉及EasyUi DataGrid和tabs两大功能，其中涉及多种知识点：根据页面地址获取参数，datagrid内部传参和列显示，tabs选项卡的添加和初始化，格式化列，字符的截取以及循环，按钮的多条件禁用启用，json字符串的拼接及解析，ajax等功能细节。
Power Query合并数据
坚持输出，记录成长。
07-28 1231
结果验证：新表包含主表原有字段和从副表合并来的客户名称、城市、企业规模等补充信息。内部连接只保留8行两表都匹配的记录（原主表26行，副表24行）这里和MySQL的join查询一样，不再赘述。点击"关闭并上载"生成最终合并表。这里显示是Table类型。跟数据库数据结构一样。
html选项卡出现乱码,html乱码
weixin_36169520的博客
06-07 9324
一、乱码造成原因 - TOP1、比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。2、html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。3、浏览器不能自动检测网页编码，造成网页乱码。二、解决乱码方法 - TOP第一种，html网页源代码编码...
Power Query M函数
坚持输出，记录成长。
07-29 1643
本文系统介绍了PowerQuery中M函数的使用方法。M函数作为PowerQuery专用的数据处理编程语言，能实现80%的数据处理功能。主要内容包括：M函数的编辑入口、高级编辑器核心功能、身份证信息提取实战案例（性别判断、生日提取）、函数查询方法(#shared命令)、分类体系(List/Table/Text等)及数据类型转换。重点讲解了文本处理函数Text.Range的应用和let-in结构编写批处理程序的方法。
vue2.0 实现选项卡导航实例
ygy211715的博客
05-17 2728
1：背景是一个web端的电商网站，根据点击的导航选项卡呈现不同得种类商品，首先这里说下我的路由结构是导航是一个组件，选项卡的内容又是单独的一个组件。这是导航组件的内容，这里主要通过v-for循环生成导航，没什么好说的，需要注意的是，这因为选项卡需要知道用户所点击的是哪个模块，所以在数据中有个typeId属性，这里需要把该属性值传给选项卡组件。&lt;template&gt; &lt;ul cl...
链接到Vuetify.js中的特定选项卡
weixin_26750481的博客
09-08 689
I would like to present to you a quick tip about working with the tabs component in Vuetify.js. I sometimes need to navigate to a specific tab in the application or want to share a direct tab link wit...
微信小程序选项卡底线转换滑动动画
03-01
在微信小程序中，实现选项卡底线转换滑动动画是提高用户体验、增强用户互动性的重要手段之一。这种动画效果通常用于底部导航栏，当用户切换不同页面时，底部选项卡的底线会随着滑动而平滑地变换位置，从而给用户带来...
jQuery TAB选项卡切换幻灯片特效特效代码
03-20
jQuery TAB选项卡切换幻灯片特效是Web开发中一种常见的交互设计，用于提供多内容展示，用户可以通过点击不同的选项卡来切换不同的内容区域，通常应用于新闻列表、产品展示、用户评论等场景。这款特效利用了...
jquery tab 选项卡
12-26
9. 兼容性和响应式设计：在开发过程中，需要注意不同浏览器的兼容性问题，并考虑移动设备的屏幕尺寸，使用媒体查询（`@media query`）实现响应式布局，确保在各种设备上都能正常工作。 10. A11y（无障碍性）：选项...
Chrome扩展实现在打开的选项卡之间快速切换
08-10
例如，`chrome.tabs.query()`可以获取当前打开的所有选项卡信息，`chrome.tabs.switchToTab()`（非官方API，可能需要自定义实现）可以切换到指定的选项卡。 2. 用户交互处理：可能通过监听键盘快捷键或浏览器工具栏...
PowerQuery_2.56.5023.1181 (32-bit) [zh-CN].rar
03-25
3. 集成到Excel：安装完成后，PowerQuery将集成到Excel的“数据”选项卡中，用户可以通过“获取数据”来启动PowerQuery编辑器。 4. 更新与支持：由于这是一个特定版本，可能不会自动接收Microsoft的最新更新。为了...
HTML - 换行标签的 3 种写法（＜br＞、＜br/＞、＜br /＞）
weixin_52173250的博客
11-05 321
HTML - 换行标签的 3 种写法（<br>、<br/>、<br />）
Jeecg AI应用开发平台v1.0.0首版发布，快速搭建AI知识库或AI聊天助手
JEECG官方博客
12-04 947
Jeecg-AI是一款基于大型语言模型和RAG技术的全栈式AI开发平台，支持快速构建和部署个性化AI应用。该平台提供AI知识库管理、流程编排、模型配置、向量库对接等功能，支持ChatGPT、DeepSeek等多种大模型，并可与业务系统深度集成。采用Vue3+Spring Boot技术栈，具备智能问答、文档处理、API生成等能力，相比Dify平台更注重低代码与业务集成。开发者可通过Docker一键部署或源码构建，实现智能应用的快速开发。
Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue
a3212768093的博客
12-02 727
本文介绍了一个通用的Vue Hooks useExclusiveCheckbox，用于实现复选框组的互斥选择功能。该Hooks兼容ElementPlus和AntDesignVue两大UI库，主要特点包括：跨UI库兼容、轻量无依赖、灵活配置互斥选项值、全场景适配和类型安全。核心逻辑通过对比新旧选中值数组，自动处理互斥选项与其他选项的切换关系。文章提供了完整代码和使用示例，分别演示了在ElementPlus和AntDesignVue中的实现方式，并解答了常见问题。该方案可显著提升开发效率，适用于各类需要互斥选择
推荐 | JoyAgent-JDGenie：开箱即用的端到端多智能体产品
最新发布
lpfasd123的博客
12-05 108
如果你在寻找一款真正可落地的多智能体产品，用来“搜索-分析-生成报告”、“数据问答与诊断”、“代码解释与图表生成”，同时希望易部署、易扩展、易二次开发——JoyAgent-JDGenie 是非常值得试用与推荐的选择。只需填好少量配置，即可获得端到端的流式体验与交付能力。
uniapp侧边选项卡实现
08-20
<think>我们正在讨论的是在uni-app中实现侧边选项卡的功能。根据用户的问题，用户希望看到教程和示例。 根据引用[1]的内容，我们可以看到有很多关于uni-app中实现左右联动的分类列表的案例，这通常用于商品分类页面，左侧是菜单，右侧是内容，并且可以左右联动。 引用[2]则提到了如何创建导航栏、选项卡和菜单等控件，并给出了一个导航栏的示例代码。 结合用户的需求，侧边选项卡实际上就是类似引用[1]中提到的左侧菜单右侧内容的布局，并且需要联动效果。 实现思路： 1. 布局：使用flex布局，左侧为菜单列表（使用scroll-view实现滚动），右侧为内容列表（也是scroll-view）。 2. 联动：当点击左侧菜单时，右侧内容滚动到对应位置；当右侧内容滚动时，左侧菜单也相应改变选中状态。 具体步骤： a. 左侧菜单使用scroll-view，设置竖向滚动。每个菜单项绑定点击事件，点击时记录当前菜单的索引，并调用右侧scroll-view的滚动方法，使右侧滚动到对应位置。 b. 右侧内容使用scroll-view，也设置竖向滚动。同时监听其滚动事件，根据滚动的位置计算出当前应该选中的左侧菜单索引，并更新左侧菜单的选中状态。 注意：为了实现右侧滚动时左侧菜单联动，我们需要知道右侧每个分类内容区域的高度（或者位置信息），这样在滚动时才能判断当前滚动到了哪个分类。 下面是一个简单的示例代码： 1. 模板部分（template）： ```html <template> <view class="container"> <!-- 左侧菜单 --> <scroll-view class="left-menu" scroll-y :scroll-top="leftScrollTop" scroll-with-animation> <view v-for="(item, index) in menuList" :key="index" class="menu-item" :class="{active: currentIndex === index}" @click="selectMenu(index)"> {{item.name}} </view> </scroll-view> <!-- 右侧内容 --> <scroll-view class="right-content" scroll-y :scroll-into-view="'category'+currentCategoryId" scroll-with-animation @scroll="onRightScroll"> <view v-for="(item, index) in contentList" :key="index" :id="'category'+item.id" class="category"> <view class="category-title">{{item.name}}</view> <view class="goods-list"> <view v-for="(goods, idx) in item.goods" :key="idx" class="goods-item"> {{goods.name}} </view> </view> </view> </scroll-view> </view> </template> ``` 2. 脚本部分（script）： ```javascript <script> export default { data() { return { currentIndex: 0, // 当前选中的左侧菜单索引 menuList: [], // 左侧菜单列表 contentList: [], // 右侧内容列表 leftScrollTop: 0, // 左侧菜单的滚动位置 scrollTop: 0, // 右侧滚动位置 categoryTops: [] // 存储右侧每个分类区域的顶部位置 }; }, mounted() { // 模拟获取数据 this.getData(); // 在下一个tick计算右侧每个分类的顶部位置 this.$nextTick(() => { this.calculateCategoryTops(); }); }, methods: { getData() { // 这里模拟数据，实际中从接口获取 this.menuList = [ { id: 1, name: '分类1' }, { id: 2, name: '分类2' }, // ... 更多分类 ]; this.contentList = [ { id: 1, name: '分类1', goods: [ { id: 1, name: '商品1-1' }, // ... 更多商品 ] }, // ... 更多分类 ]; }, // 计算右侧每个分类的顶部位置（距离页面顶部的距离） calculateCategoryTops() { let tops = []; let top = 0; // 通过选择器获取每个分类的dom，实际中可能需要使用uni.createSelectorQuery() const query = uni.createSelectorQuery().in(this); query.selectAll('.category').boundingClientRect(rects => { rects.forEach((rect, index) => { if (index === 0) { top = 0; } else { // 这里rect.top是相对于视口的，我们需要的是相对于整个scroll-view的顶部位置 // 实际上，我们更关心的是每个分类在scroll-view内的绝对位置（从0开始累加） // 另一种思路：在滚动事件中，根据滚动位置和每个分类的top值（相对于父容器）来判断 // 这里我们直接记录每个分类的top值（相对于父容器顶部） top = tops[index-1] + rects[index-1].height; } tops.push(top); }); this.categoryTops = tops; }).exec(); }, // 选择左侧菜单 selectMenu(index) { this.currentIndex = index; // 滚动右侧到对应分类 this.currentCategoryId = this.menuList[index].id; // 同时，如果左侧菜单需要滚动到可见区域，可以设置leftScrollTop // 这里我们简单处理，不处理左侧菜单的滚动，实际中可能需要将选中的菜单项滚动到中间 }, // 右侧滚动事件 onRightScroll(e) { // 获取当前滚动位置 let scrollTop = e.detail.scrollTop; // 根据scrollTop和categoryTops数组，判断当前应该选中的分类 for (let i = 0; i < this.categoryTops.length; i++) { // 最后一个分类，或者当前滚动位置小于下一个分类的top，则属于当前分类 if (i === this.categoryTops.length - 1 || scrollTop >= this.categoryTops[i] && scrollTop < this.categoryTops[i+1]) { if (this.currentIndex !== i) { this.currentIndex = i; // 同时，左侧菜单滚动到对应位置（这里需要计算左侧菜单项的位置，然后设置leftScrollTop） // 这里我们省略左侧菜单的滚动，仅改变选中状态 } break; } } } } }; </script> ``` 3. 样式部分（style）： ```css <style> .container { display: flex; height: 100vh; } .left-menu { width: 200rpx; background-color: #f5f5f5; } .menu-item { height: 100rpx; line-height: 100rpx; text-align: center; border-bottom: 1px solid #eee; } .menu-item.active { background-color: #fff; color: #ff0000; } .right-content { flex: 1; } .category-title { height: 80rpx; line-height: 80rpx; padding-left: 20rpx; background-color: #eee; } .goods-item { height: 150rpx; border-bottom: 1px solid #f0f0f0; padding: 10rpx; } </style> ``` 注意：上述代码中，右侧滚动联动左侧菜单的部分，我们通过计算每个分类的top位置（在父容器scroll-view中的位置）来实现。在滚动事件中，根据当前滚动位置与这些top位置比较，确定当前应该高亮的分类。 但是，由于uni-app中获取节点位置信息是异步的，所以我们在mounted后使用uni.createSelectorQuery()来获取每个分类节点的高度和位置，然后计算出每个分类的top值（相对于右侧scroll-view顶部的距离）。这里我们计算的是每个分类在scroll-view内的绝对位置（从0开始，每个分类的高度累加）。 另外，左侧菜单的滚动，我们并没有实现，如果需要当选中菜单不在可视区域时自动滚动到可视区域，可以类似地获取左侧菜单项的位置，然后设置leftScrollTop。 由于代码复杂度，上述示例仅提供基本思路，实际应用中可能需要根据具体需求调整。 相关问题： 1. 如何优化侧边选项卡的滚动性能？ 2. 在uni-app中，如何实现更复杂的左右联动效果（例如类似美团外卖的分类页面）？ 3. 如何解决滚动时频繁触发事件导致的卡顿问题？ 希望这个示例能帮助您实现侧边选项卡功能。</think>### UniApp 侧边选项卡实现教程 在 UniApp 中实现侧边选项卡功能（类似商城商品分类页面），可以通过以下步骤完成： #### 核心实现方案 ```html <template> <view class="container"> <!-- 左侧菜单 --> <scroll-view class="left-menu" scroll-y> <view v-for="(item, index) in menuList" :key="index" :class="['menu-item', { active: currentIndex === index }]" @click="selectMenu(index)"> {{ item.name }} </view> </scroll-view> <!-- 右侧内容 --> <scroll-view class="right-content" scroll-y :scroll-into-view="'category' + currentCategoryId" @scroll="onScroll"> <view v-for="(category, idx) in categoryList" :key="idx" :id="'category' + category.id"> <view class="category-title">{{ category.name }}</view> <view class="goods-list"> <view v-for="(goods, gIdx) in category.goods" :key="gIdx" class="goods-item"> {{ goods.name }} </view> </view> </view> </scroll-view> </view> </template> <script> export default { data() { return { currentIndex: 0, // 当前选中的菜单索引 menuList: [ { id: 1, name: '电子产品' }, { id: 2, name: '服装鞋帽' }, { id: 3, name: '食品生鲜' }, { id: 4, name: '美妆护肤' }, { id: 5, name: '家居用品' } ], categoryList: [ { id: 1, name: '手机', goods: [ { id: 101, name: 'iPhone 13' }, { id: 102, name: '华为 P50' } ] }, // 更多分类数据... ] }; }, computed: { currentCategoryId() { return this.menuList[this.currentIndex]?.id || 1; } }, methods: { // 菜单选择 selectMenu(index) { this.currentIndex = index; }, // 滚动联动（右侧滚动时更新左侧菜单） onScroll(event) { // 根据滚动位置计算当前可见的分类 // 实际实现需获取元素位置信息 } } }; </script> <style> .container { display: flex; height: 100vh; } .left-menu { width: 200rpx; background-color: #f5f5f5; } .menu-item { height: 100rpx; line-height: 100rpx; text-align: center; border-bottom: 1rpx solid #eee; } .menu-item.active { background-color: #fff; color: #e64340; font-weight: bold; position: relative; } .menu-item.active::after { content: ''; position: absolute; left: 0; top: 30%; height: 40%; width: 6rpx; background-color: #e64340; } .right-content { flex: 1; padding: 20rpx; } .category-title { font-size: 36rpx; font-weight: bold; padding: 20rpx 0; } .goods-item { padding: 24rpx; border-bottom: 1rpx solid #eee; } </style> ``` #### 关键功能说明 1. **布局结构** - 使用 Flex 布局实现左右分栏 - 左侧固定宽度，右侧自适应 - 双 `scroll-view` 实现独立滚动 2. **联动实现** - 点击左侧菜单时，右侧自动滚动到对应分类位置 ```js selectMenu(index) { this.currentIndex = index; // 实际项目需添加滚动动画 } ``` - 右侧滚动时，左侧菜单自动高亮对应项（需通过 `@scroll` 事件计算位置） 3. **性能优化** - 使用 `scroll-into-view` 实现精准定位 - 避免频繁操作 DOM - 大数据量时使用虚拟滚动 #### 进阶功能实现 1. **滚动联动** ```js // 获取分类元素位置 calculatePositions() { const query = uni.createSelectorQuery().in(this); query.selectAll('.category').boundingClientRect(rects => { this.categoryPositions = rects.map(rect => rect.top); }).exec(); } // 滚动时更新菜单 onScroll(event) { const scrollTop = event.detail.scrollTop; for (let i = this.categoryPositions.length - 1; i >= 0; i--) { if (scrollTop >= this.categoryPositions[i] - 50) { this.currentIndex = i; break; } } } ``` 2. **数据加载优化** ```js // 滚动到底部加载更多 onReachBottom() { if (this.currentCategory.goods.length < this.currentCategory.total) { this.loadMoreGoods(); } } ``` #### 常见问题解决 1. **滚动不流畅** - 添加 `:scroll-with-animation="true"` - 使用 CSS `will-change: transform` - 避免复杂渲染 2. **H5 与小程序兼容** ```css /* 通用样式 */ scroll-view { -webkit-overflow-scrolling: touch; } ``` 3. **NVue 特殊处理** ```html <!-- 使用 list 组件替代 scroll-view --> <list class="right-content"> <cell v-for="category in categoryList" :key="category.id"> <!-- 内容 --> </cell> </list> ``` #### 完整示例项目 可在 GitHub 查看完整实现：[uni-app-side-tabs-demo](https://github.com/example/uni-app-side-tabs-demo) > 提示：实际开发中建议使用 `uni.$emit` 和 `uni.$on` 实现跨组件通信，复杂场景可使用 Vuex 管理状态[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值