如何使用jq写tab选项卡

最新推荐文章于 2024-03-06 23:29:13 发布
最新推荐文章于 2024-03-06 23:29:13 发布
阅读量311 收藏
点赞数 1
分类专栏： jq中tab选项卡 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuxiang0123/article/details/111462136
版权

使用jq写tab选项卡

jq写选项卡相比js的代码要少一些，而且不用循环 ！！！ 下面``是我写的一个简单的选项卡！！！
在这里插入图片描述
style里面是css样式
在这里插入图片描述
首先写布局，我写的是上下布局，也可以写左右布局。然后写了ul和几个div,想要得到的效果就是，当我点击每一个li的时候都会显示相对应的div，其余的div隐藏掉。开始给ul下边的li写一个点击事件，接着声明一个变量，获取下边，点到某一个li都会添加class样式，其他兄弟元素移除样式，div也是同样的道理，这里用到了eq(),括号里放的是声明的变量，也就是第几个的意思。代码也有注释，大家可以看下!!!

@Wx0123
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQ写的tab选项卡
weixin_42974569的博客
10-20 372
支持鼠标滑动切换 jQ <script> $(function(){ $(".nav>li").mouseenter(function(){ $(this).addClass("ou"); $(this).siblings().removeClass("ou"); $(".current>li").eq($(this).index()).addCl
jQuery制作tab选项卡
weixin_44886806的博客
05-18 1753
用jQuery来制作tab的选项卡。 说白了就是切换到别的选项，已简单的例子来说，先写出样式. CSS部分: <style> ul,li{ list-style: none; margin: 0; padding: 0; } .nav { width: 80%; line-height: 48px; background: #f6f8fa; overflow: hidden;
js、jq实现tab选项卡切换
努力变好
08-02 2553
js、jq实现tab选项卡切换
使用JQ实现Tab选项卡的切换功能
weixin_56286359的博客
03-06 445
潮汕猪杂</div><div class="option">沙县孜然牛肉盖浇面</li><li>牛肉丸汤粉/面</li><li>牛肉炒刀削面</li><li>猪杂汤粉/面</li><li>廋肉汤粉/面</li><li>酥皮叉烧</li><li>虎皮凤爪</li><li>杂酱面</li><li>拌面</li><li>蒸饺</li><li>汤饺</li><li>虾饺
使用jq实现tab选项卡
alifj9932的博客
12-06 72
jq代码 $('#fenlei_title span').click(function() { $("#fenlei_title span").eq($(this).index()).addClass("current").siblings().removeClass('current'); $(".J_pic").hide()....
jq实现tab选项卡
style201904的博客
05-22 413
<div class="tab"> <ul class="tab-title"> <li class="this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li>
用jQuery事件写Tab选项卡
m0_66128311的博客
06-06 1545
瞎写的，不喜勿喷。
jQuery——tab选项卡
qq_41973154的博客
09-04 155
鼠标滑动，切换不同的选项卡 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <titl...
jq tab选项卡切换
木槿之夏
12-01 1724
<script type="text/javascript"> $(function() { $('.div1 input').click(function() { $(this).addClass('selete').siblings().removeClass('selete'); $('.d
JQ向上滑动切换Tab选项卡.zip
07-05
"JQ向上滑动切换Tab选项卡"是一个利用jQuery实现的创新性网页组件，旨在为用户提供一种新颖的标签切换体验。这个组件不仅提供了传统选项卡的切换功能，还通过向上滑动的手势增加了互动性和趣味性，同时保持了良好的...
jQuery简单实现tab选项卡切换效果
10-22
主要介绍使用jQuery封装了一个tab选项卡切换的插件，需要的朋友可以参考下。
jQuery实现移动端Tab选项卡效果
12-10
效果图： 代码如下： <!...<... ...meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable...移动端Tab选项卡</title> [removed]</scr
jQuery叶子Tab选项卡.zip
07-11
代码简介：jQuery叶子Tab选项卡是一款基于CSS3 jQuery实现的动态滑动展示的选项卡Tab效果，选项卡在切换过程中带有动态滑动效果，选项卡内可以防止图片、文本或者图文混排内容。
前端分析-202307110039
最新发布
07-29
前端分析-202307110039
Oracle中文基础PPT
07-29
Oracle中文基础PPT 虽然是10g，但是学习Oracle，10g版本没问题 Less01_DB_Architecture_MB3.ppt Less02_Installation_MB3.ppt Less03_DB_DBCA_MB3.ppt Less04_Instance_TB3.ppt Less05_Storage_TB3.ppt Less06_Users_MB3.ppt Less07_Schema_TB3.ppt Less08_Data_TB3.ppt Less09_Undo_TB3.ppt Less10_Security_MB3.ppt Less11_Network_MB3.ppt Less12_ProactiveM_MB3.ppt Less13_Performance_TB3.ppt Less14_BR_Concepts_MB3.ppt Less15_Backups_TB3.ppt Less16_R
【创新未发表】Matlab实现粒子群优化算法PSO-Kmean-Transformer-BiLSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
Java项目：基于SSM框架实现的公务员培训机构管理系统【ssm+B/S架构+源码+数据库+开题+任务书+毕业论文】
07-29
一、项目简介 本项目是一套基于SSM框架实现的公务员培训机构管理系统 包含：项目源码、数据库脚本等，该项目附带全部源码可作为毕设使用。 项目都经过严格调试，eclipse或者idea 确保可以运行！ 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值 二、技术实现 jdk版本：1.8 及以上 ide工具：IDEA或者eclipse 数据库: mysql5.7 后端：spring+springmvc+mybatis+maven+mysql 前端：jsp，css，js 三、系统功能 系统登录角色包括管理员、考生、在职公务员 后台主要功能包括： 个人中心 修改密码 个人信息 在职公务员管理 考生管理 管理员信息 讲师管理 备考课程管理 基础数据管理 单位管理 公告类型管理 课程类型管理 在职培训课程管理 公告管理 轮播图管理等功能 前台主要功能包括： 用户登录 用户注册 首页 备考课程展示 课程详情 立即预订 讲师展示 公告信息 个人中心 备考课程预订 在职培训课程预订 余额充值 在职培训课程 跳转到后台等功能
jq实现tab选项卡切换
03-31
以下是一个简单的例子，使用jq实现tab选项卡切换： HTML代码： ```html <div class="tab"> <ul class="tab-menu"> <li class="active">Tab1 <li>Tab2 <li>Tab3 <div class="tab-content"> <div class="tab...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值