jQuery实现点击式选项卡

最新推荐文章于 2022-08-02 15:55:50 发布
最新推荐文章于 2022-08-02 15:55:50 发布
阅读量106 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/meet/p/4748499.html
版权

参考：jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动

效果如下：

211751225971426.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< style type = "text/css" >
     body{
         font-size: 13px;
     }
     ul,li{
         margin: 0;padding: 0;
         list-style: none;
     }
     #menu li{
         text-align: center;
         float: left;
         padding: 5px;
         margin-right: 2px;
         width: 50px;
         cursor: pointer;
     }
     #menu li.tabFocus{
         width: 50px;
         font-weight: bold;
         background-color: #f3f2e7;
         border: solid 1px #666;
         border-bottom: 0;
         z-index: 100;
         position: relative;
     }
     #content{
         width: 260px;
         height: 80px;
         padding: 10px;background-color: #f3f2e7;
         clear: left;
         border: solid 1px #666;
         position: relative;
         top: -1px;
     }
     #content li{
         display: none;
     }
     #content li.conFocus{
         display:block;
     }
      
  
</ style >
< script type = "text/javascript" src = "jquery-1.4.4.js" ></ script >
< script type = "text/javascript" >
     $(function(){
         $("#menu li").each(function(index) {//遍历选项卡
             $(this).click(function() {//注册每个选项卡点击事件
                 $("#menu li.tabFocus").removeClass('tabFocus');
                 $(this).addClass('tabFocus');//增加当前选中项样式
                 //显示选项卡对应的内容并影藏不被选中的内容
                 $("#content li:eq("+index+")").show().siblings().hide();
             });
         });
  
  
     });
</ script >
< title >jQuery实现选项卡</ title >
</ head >
< body >
     < ul id = "menu" >
         < li class = "tabFocus" >家居</ li >
         < li >电器</ li >
         < li >二手</ li >
     </ ul >
     < ul id = "content" >
         < li class = "tabFocus" >家居内容</ li >
         < li >电器内容</ li >
         < li >二手内容</ li >
     </ ul >
</ body >
</ html >






转载于:https://www.cnblogs.com/meet/p/4748499.html

weixin_30847865
关注
jQuery下实现选项卡
weixin_51959098的博客
11-26 382
$(‘ul>li’).click(function() { $(this).addClass(‘active’).siblings().removeClass(‘active’) (′ol>li′).eq(('ol>li').eq((′ol>li′).eq((this).index()).addClass(‘active’).siblings().removeClass(‘active’) }) ’ 选项卡头：ul 选项卡体：ol $(‘ul>li’).
jquery实现选项卡
09-01
在前一段学习原生js中学习了选项卡的实现方式，其核心是切换css样式，以实现视觉上的切换。在学习jquery中则有不同的方法，当然其思想也还是那个思想，只是有了封装好的更简单的方法。下面是菜鸟代码。
jq选项卡
Junit的博客
04-09 421
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request...
选项卡（点击切换）
m0_37238192的博客
05-02 520
选项卡（点击切换） &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;实践题 - 选项卡&lt;/title&gt;    &lt;style type=&qu
jQuery实现选项卡效果
qianzihao007
01-15 676
简介：实现点击ul下面的li切换下面的div 00：导入jQuery <script src="jquery-3.5.1.js"></script> 一，布局实现 <ul id="uls"> <li class="active">首页</li> <li>分类</li> <li>展示</li> </ul> <div
jQuery实现的垂直选项卡点击显示内容特效源码.zip
最新发布
11-18
这个"jQuery实现的垂直选项卡点击显示内容特效源码.zip"压缩包包含了一个利用jQuery来创建垂直选项卡效果的示例代码。这种效果常用于网页设计，以提高用户体验，通过点击选项卡来切换不同的内容区域。 首先，我们来...
jQuery实现移动端Tab选项卡效果
10-20
本文将介绍如何利用jQuery库来实现移动端Tab选项卡效果。 首先，要实现移动端Tab选项卡，我们必须先了解移动端开发的几个基本点。移动设备的屏幕尺寸、分辨率和操作系统各异，因此，需要确保网页在不同设备上均能...
jQuery实现TAB选项卡切换特效简单演示
11-23
在本文中，我们将深入探讨如何使用jQuery来实现一个简单的选项卡切换特效。这个效果常见于网页设计中，用于展示不同的内容区域，用户可以通过点击不同标签来切换显示的内容。以下是实现这个功能的关键步骤和相关知识...
jQuery简单实现网页选项卡特效
10-25
通过这种方式，我们可以创建一个交互式的选项卡系统，用户可以方便地在不同的内容之间切换，而无需刷新整个页面。这种简单的jQuery实现既节省了空间，又提高了用户体验，是网页设计中常用的一种技术。在实际项目中，...
js 点击切换选项卡代码、jq 点击切换选项卡代码
01-15 219
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>点击切换选项卡代码</title> <metaname="viewpo...
jquery选项 iframe选项卡
05-18
很好用的一个选项卡插件，需要和自己页面样式一样，可以改一些css就可以了
html css js tab选项卡
10-28
html css js tab选项卡
jq选项卡切换
前端技术
07-04 7326
 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;选项卡&lt;/title&gt; &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js "&gt;&lt;/script&gt;
30 个实用的 jQuery 选项卡/导航教程推荐
weixin_34329187的博客
11-18 214
很多网站设计中都使用了选项卡（tabs），在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果。本文为你介绍30个实用的jQuery选项卡教程，希望对你有帮助。 1. Animated Tabbed Content With jQuery 选项卡被现代网站普遍应用，但大多数形式呆板。本教程逐步为你讲授如何实现选项卡动画切换效果。 示例  2. Tab Navigation with...
js、jq实现tab选项卡切换
努力变好
08-02 2601
js、jq实现tab选项卡切换
JQ单击事件选项卡例子
刀刀宅
06-11 1453
JQ单击事件选项卡例子
jQuery选项卡事件
恋雨烟梦
06-09 671
点击选项卡标题【其他条件】，动态加载【其他条件】选项卡下的动态组件
jquery实现选项卡切换
热门推荐
近未来
09-01 3万+
jquery 利用 index() 查找下标实现选项卡切换
jQuery实现动态多选项卡效果代码示例
"该资源提供了一个使用jQuery实现的多选项卡效果实例，其中包括多个选项卡，每个选项卡内部有不同数量的选项。示例代码包括jQuery脚本和HTML结构，用于展示动态切换选项卡的功能。" 在网页设计中，选项卡是一种常见...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值