jquery tab标签切换（无炫效果，简单的显示隐藏）

最新推荐文章于 2022-08-02 15:55:50 发布
最新推荐文章于 2022-08-02 15:55:50 发布
阅读量794 收藏 3
点赞数
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_C_sunny/article/details/104432099
版权
从最简单的效果开始写起，一个简单的JQ写出tab切换效果，很静态，没有任何的轮转特效，单纯的点击标签显示区域块。
	<div id="nav-all" class="nav-all" style="height: 25.625rem;display: block;">
					<div id="nav-list">
						<div class="nav-list">
							<span>已为您精准找到</span>
							<span class="count">9</span>
							<span>  位 “<span class="count">企业名称</span>”的老板 </span>
						</div>
					</div>
					<div id="nav-information"  class="nav-information">
						<div class="lk_scrollBox w section">			
							<div class="lk_scrollInner">
								<div class="lk_content">
									<!-- <table border="0" cellpadding="0" cellspacing="0">
										<tbody> -->
											<div id="tupu" class="clearfix tupu-public">
												<div class="left tupu">
													<div class="tupu-top">
														<div class="clearfix">
															<div class="left tupu-img">
																<img src="img/tabBar/xinxi.png" alt="">
															</div>
															<div class="left">
																<p>
																	<span>姓名</span>
																	<span>xxx</span>
																</p>
																<p>
																	<span>他有<span style="color: red;">52</span>家公司</span>
																</p>
															</div>
														</div>
													</div>
													<div class="tupu-btn">
														<div class="clearfix">
															<div class="left">
																<p>
																	<span>北京<span>22</span>家</span>
																</p>
																<p>
																	<span>其他<span>22</span>家</span>
																</p>
															</div>
															<div class="right">
																<p>
																	<span>XXX..asdasd等</span>
																</p>
																<p>
																	<span>XXX..等</span>
																</p>
															</div>
														</div>
													</div>
													
													
												</div>
												<div class="left tupu">
													<div class="tupu-top">
														<div class="clearfix">
															<div class="left tupu-img">
																<img src="img/tabBar/xinxi.png" alt="">
															</div>
															<div class="left">
																<p>
																	<span>姓名</span>
																	<span>xxx</span>
																</p>
																<p>
																	<span>他有<span style="color: red;">52</span>家公司</span>
																</p>
															</div>
														</div>
													</div>
													<div class="tupu-btn">
														<div class="clearfix">
															<div class="left">
																<p>
																	<span>北京<span>22</span>家</span>
																</p>
																<p>
																	<span>其他<span>22</span>家</span>
																</p>
															</div>
															<div class="right">
																<p>
																	<span>XXX..asdasd等</span>
																</p>
																<p>
																	<span>XXX..等</span>
																</p>
															</div>
														</div>
													</div>
													
													
												</div>
												<div class="left tupu">
													<div class="tupu-top">
														<div class="clearfix">
															<div class="left tupu-img">
																<img src="img/tabBar/xinxi.png" alt="">
															</div>
															<div class="left">
																<p>
																	<span>姓名</span>
																	<span>xxx</span>
																</p>
																<p>
																	<span>他有<span style="color: red;">52</span>家公司</span>
																</p>
															</div>
														</div>
													</div>
													<div class="tupu-btn">
														<div class="clearfix">
															<div class="left">
																<p>
																	<span>北京<span>22</span>家</span>
																</p>
																<p>
																	<span>其他<span>22</span>家</span>
																</p>
															</div>
															<div class="right">
																<p>
																	<span>XXX..asdasd等</span>
																</p>
																<p>
																	<span>XXX..等</span>
																</p>
															</div>
														</div>
													</div>
													
													
												</div>
												
												
											</div>
									<!-- </tbody></table> -->
								</div>
							</div>
						 
							<div class="lk_scrollbar">
									<div class="lk_begin"></div>
									<div class="lk_handle" style="width: 30px; left: 0px;"></div>
									<div class="lk_end"></div>
							</div>
						 
						</div>
							
					</div>
					
					<!--  -->
					<div id="nav-list1">
						<div class="nav-list">
							<span>已为您精准找到</span>
							<span class="count">20</span>
							<span>个项目品牌、投资机构 </span>
						</div>
					</div>
					<div id="nav-information1" class="nav-information">
						<div class="lk_scrollBox w section">			
							<div class="lk_scrollInner">
								<div class="lk_content">
									<!-- <table border="0" cellpadding="0" cellspacing="0">
										<tbody> -->
											<div id="tupu1" class="clearfix tupu-public">
												<div class="left tupu">
													<div class="tupu-top">
														<div class="">
															项目品牌、投资机构
														</div>
														
													</div>
													<div class="tupu-btn">
														<div class="clearfix">
															<div class="left">
																<div class="tupu-btn-img">
																	<img src="img/tabBar/xinxi.png" alt="">
																</div>
															</div>
															<div class="left">
																<p>
																	<span>融资轮次:<span>22</span></span>
																</p>
																<p>
																	<span>竞品数量:<span>22</span></span>
																</p>
															</div>
														</div>
													</div>
													
													
												</div>
												<div class="left tupu">
													<div class="tupu-top">
														<div class="">
															项目品牌、投资机构
														</div>
														
													</div>
													<div class="tupu-btn">
														<div class="clearfix">
															<div class="left">
																<div class="tupu-btn-img">
																	<img src="img/tabBar/xinxi.png" alt="">
																</div>
															</div>
															<div class="left">
																<p>
																	<span>融资轮次:<span>22</span></span>
																</p>
																<p>
																	<span>竞品数量:<span>22</span></span>
																</p>
															</div>
														</div>
													</div>
													
													
												</div>
												<div class="left tupu">
													<div class="tupu-top">
														<div class="">
															项目品牌、投资机构
														</div>
														
													</div>
													<div class="tupu-btn">
														<div class="clearfix">
															<div class="left">
																<div class="tupu-btn-img">
																	<img src="img/tabBar/xinxi.png" alt="">
																</div>
															</div>
															<div class="left">
																<p>
																	<span>融资轮次:<span>22</span></span>
																</p>
																<p>
																	<span>竞品数量:<span>22</span></span>
																</p>
															</div>
														</div>
													</div>
													
													
												</div>
												
												
											</div>
									<!-- </tbody></table> -->
								</div>
							</div>
						 
							<div class="lk_scrollbar">
									<div class="lk_begin"></div>
									<div class="lk_handle" style="width: 30px; left: 0px;"></div>
									<div class="lk_end"></div>
							</div>
						 
						</div>
							
					</div>
				</div>
				<!-- 按行业 -->
				<div id="According" class="nav-all" style="height: 25.625rem;text-align: center;line-height:25.625rem;display: none;">
					选项卡二内容
				</div>
				<!-- 按行业 -->
				<div id="shuaxuan" class="nav-all" style="height: 25.625rem;text-align: center;line-height:25.625rem;display: none;">
					选项卡三内容
				</div>

简单js

$('.nav ul li').click(function(event) {
	  $(this).addClass('active');
	  $(this).siblings().removeClass('active');
		$(".nav-all").hide().eq($(".nav ul li").index(this)).show();
	})
Sunny
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jq实现简单的tab切换效果
小利的博客
09-09 1353
html部分： <div id="tabhead" class="tabhead"> <span class="tab" data-id="remote">插入图片</span> <span class="tab focus" data-id="upload">本地上传</span> <span class="tab" data-id="online">在线管理</span>
jq的tab切换
junyu1024的博客
11-24 411
html:<!--菜单--> <div class="menu"> <span class="active">热门</span> <span class="">帮你解答</span> <span class="">帮你识图</span> <span class="">我要分享</span> </div> <div class="box"> <div class
js + jquery 两栏Tab鼠标移入显示/隐藏的效果（详）
前端Cocoko
10-20 1474
var oTab_fts=document.getElementById(&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;cen_swiper_top&am
jQuery EasyUI实现全部关闭tabs
weixin_34160277的博客
07-17 98
有时，当我们打开很多tabs当标签,要关闭一个接一个，它只能被关停显然太麻烦,能够在选项卡的最右边加入一个button 实现关闭所有。代码例如以下：&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;index.html&l...
jQuery 显示与隐藏 tab选项卡
weixin_30856965的博客
12-05 1814
方法一：使用display样式：block、none来控制文本的显示与隐藏 <div class="explain_text"> 移动互联网为企业提供了连接用户的新方式...... </div> <div class="show_text" style="display:none;"> 移动互联网为企业提供了连接用户的新方式...... &l...
jQuery实现的tab标签切换效果示例
10-21
在网页设计中，Tab标签切换效果是一种常见的交互设计模式，用于组织和展示多组相关但内容不同的信息。jQuery，一个轻量级的JavaScript库，提供了简单易用的API，使得实现这种效果变得非常便捷。本示例将详细介绍如何...
jquery渐变切换tab标签
06-10
"jQuery 渐变切换Tab标签"是将这一交互方式与动态视觉效果相结合，为用户提供更加吸引人的浏览体验。在本教程中，我们将深入探讨如何使用jQuery实现这种渐变切换效果，以及它与其他Tab标签的区别。 首先，让我们...
jquery多图tab标签切换焦点图
06-09
"jQuery多图tab标签切换焦点图"是这样一种特效，它结合了jQuery库的强大功能和tab标签的简洁布局，使得多张图片可以按照预设的顺序或者用户的选择进行切换。下面我们将深入探讨这一主题。 首先，jQuery是一个轻量级...
js(JavaScript)实现TAB标签切换效果的简单实例
10-26
在网页设计中，TAB标签切换效果是一种常见的交互设计模式，它允许用户通过点击不同的标签来切换显示不同的内容区域。本文将详细介绍如何使用JavaScript实现这样的效果，这个实例特别适合初学者理解和实践。 首先，...
jQuery标签TAB控制图片切换代码
04-09
本主题涉及的是利用jQuery实现一个标签页（TAB）系统来控制图片的切换，这种功能常见于产品展示、相册浏览等场景，提供用户友好的交互体验。 首先，我们需要了解jQuery的基本使用。jQuery的核心概念是“链式调用”...
JS实现的简单标签点击切换功能示例
10-19
主要介绍了JS实现的简单标签点击切换功能,涉及javascript事件响应及页面元素遍历、属性动态变换等相关操作技巧,需要的朋友可以参考下
html动态tabs选项卡,jQuery创意Tabs选项卡
weixin_29982199的博客
06-03 577
插件描述：基于jquery和bootstrap实现的创意Tabs选项卡特效。通过简单的十几行CSS代码，将原生的bootstrap选项卡进行美化，效果非常炫酷。使用方法在页面中引入jquery和bootstrap相关文件。HTML结构该tabs选项卡的基本HTML结构如下：：Section1Section2Section3Section1.......Section2......Sect...
如何使用CSS和jQuery隐藏和显示选项卡内容
一名可爱的技术搬运工
05-24 343
演示：尝试单击选项卡 当我开发foodshaker.com时 。 我需要创建一个多标签导航来隐藏和显示标签内容。 为了开发轻量级的多表，我决定使用jQuery和CSS来简化它。 1.解释 以下是导航示例： <div> <ul class="nav nav-tabs"> <li class="active"> ...
js、jq实现tab选项卡切换
努力变好
08-02 2534
js、jq实现tab选项卡切换
jquery ui_排名前5位的jQuery UI替代品
03-15 278
jquery ui 在构建现代Web时，您通常需要创建有用的UI组件。 无论您需要日历，滑块，图形还是其他对改善或简化用户交互有用的选项，您都可以选择自己创建日历或利用现有功能。 自己开发这些组件通常是耗时且复杂的，除非您执行完全独特的操作，否则通常不会浪费您的时间。 这就是UI库和框架起作用的地方。 这些库简化了创建通用UI组件的过程。 您可以利用这些现有框架并对其进行自定义以满足您的需求。...
5款移动开发轻量jQuery的替代品
Gavid0124的专栏
12-29 7826
我们都爱jQuery的。这个网站甚至专门为建设美丽的例子，使用该库。但也有情况下，jQuery是不是一个明智的选择。如果您使用的是它只有简单的DOM操作或一个AJAX请求或两个，为什么放慢你的页面加载时间，并引入一个额外的依赖？ 更严重的问题是，在移动设备上。你看，虽然我们包括通过CDN的jQuery像谷歌的，它仍然是不自由 - 下载和解析尚需时日。非常的事情，jQuery的流行 - 完
tab切换控制显示隐藏的超级简单实用方法
crystalHy的博客
08-25 4148
tab切换控制显示隐藏的超级简单实用方法 三重一大事项--> 第一 协同办公--> 第二 执法案件--> 第三
jQuery+CSS实现滑动的标签分栏切换效果
最新发布
05-25
可以使用jQuery和CSS实现滑动的标签分栏切换效果，具体步骤如下： HTML结构： ```html <div class="tab-wrap"> <a href="#" class="active">Tab 1 <a href="#">Tab 2 <a href="#">Tab 3 <div class="tab-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Sunny

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

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

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

打赏作者

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

抵扣说明：

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

余额充值