用jquery写tab菜单

最新推荐文章于 2024-08-23 14:03:47 发布
最新推荐文章于 2024-08-23 14:03:47 发布
阅读量947 收藏
点赞数
分类专栏： jQuery学习旅程 文章标签： jquery function border class xhtml div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangna01314/article/details/4903815
版权

 上次用纯CSS写的 tab，似乎很不方便，今天就把用jquery写的tab放上来：

先看一下效果图：

 

 

下面我们来看一下代码：

<!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=gb2312" />
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $("#tabMenu > li").click(function(){
   $("#tabMenu > li").removeClass('selected');
   $(this).addClass('selected');
   $('.boxbody div').slideUp('500');
   $('.boxbody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('500');
  }).mouseover(function() {
     $(this).addClass('mouseover');
       $(this).removeClass('mouseout');
   }).mouseout(function() {
      $(this).addClass('mouseout');
        $(this).removeClass('mouseover'); 
  });      
 });
</script>
<style type="text/css">
*{margin:auto;}
body{font-size:12px;}
a {text-decoration:none;}
a:hover{text-decoration:none;}
.box{width:500px; margin-top:50px ;border:1px solid red;}
#tabMenu{list-style:none; border:1px solid #CCFF66; width:500px; }
#tabMenu li{list-style:none; height:35px;width:150px;cursor:pointer;cursor:hand; float:left; text-align:center;padding:5px;}

li.mouseover { background:#CCFFFF;background-position:0 0;}
li.mouseout { background:#FFFF99;background-position:0 -32px;}
li.selected { background:#00FFFF;background-position:0 0;}

.boxbody div {display:none; width:500px;height:100px;}
.boxbody div.show {display:block;}
.boxbody #category a {display:block;}
</style>
<title>jquery写tab菜单</title>
</head>

<body>
<div class="box">
 <ul id="tabMenu">
  <li>首页</li>
  <li>产品中心</li>
  <li>人才招聘</li>
 </ul>

 
 <div class="boxbody">
  <div id="shouye" class="show">我是首页</div>
  <div id="chanpin">我是产品中心</div>
  <div id="rencai">我是人才招聘</div>
 </div>

</div>
</body>
</html>

其实都是很简单的使用jquery。

yangna01314
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用jQuery实现简单的tab栏标签切换
zhake_的博客
05-02 1万+
强调下没有CSS样式代码 1.页面结构代码 导航菜单 TAB标签 jquery css多级下拉菜单 多级菜单，理论上支持无限多的层级，文件结构非常简单的，具体的请看下面的内容 各种tab标签选项卡 tab标签页面,ajax载入 ta
jquery实现tab栏切换
m0_64739799的博客
03-30 2346
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
jquery实现tab栏
延宾的博客
05-10 356
Document       div{margin:0;padding:0;width:184px;height:200px;border:1px solid #ccc;display:none;} .tab{margin:0;padding:0;list-style:none;width:200px;overflow:hidden;} .tab li{float:left;wi
通过按钮click事件跳转到菜单栏某一个菜单tab页
qq_41606535的博客
01-23 4719
需求：通过全部按钮，切换到代办事项选项卡 如下图所示： 说明：菜单栏选卡只有在触发该菜单按钮的click事件后才会生成 菜单列表选项卡生成代码如下： $('.left-nav #nav li').click(function (event) { //菜单列表的click事件 if($(this).children('.sub-menu').length){ //判断是...
使用jq实现tab栏切换功能，并且展示对应的内容区域
i96249264_bo的博客
05-31 1115
描述 当点击tab栏时实现切换tab栏，并且显示对应的内容区域，比如tab栏中有a、b、c。当点击a时内容部分展示的是a对应的内容，当点击b时，内容部分展示的是b对应的内容。 思路 首先说一下html的布局划分，把整体划分为头部为tab部分，底部为内容部分;默认展示第一个，其余内容都隐藏，当点击tab中的某一个时再让对应的内容展示出来；接着给tab中的a、b、c添加一个自定义属性type,这里的属性名可以随意取，属性值从0开始依次往后排，然后给tab中的a、b、c添加点击事件，在点击事件里获取当前点击的那个
jQuery实现tab栏切换
车联网开发的博客
08-18 3987
涉及到的知识点包括 为选择的元素增加序号、过滤选择器、排他思想、动态增加样式等。 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;tab栏切换&lt;/title&gt; &lt;style type="text/
jQuery实现Tab菜单滚动切换的方法
10-23
在使用jQuery创建网页交互功能时，Tab菜单滚动切换是一种常见的动态效果，可以让用户在不同的内容标签之间切换查看，同时保持页面的整洁和用户体验的友好性。本篇内容主要讲述了如何利用jQuery实现Tab菜单滚动切换，...
jQuery网站Tab下拉菜单特效
07-24
首先，Tab菜单是一种常见的网页导航结构，通过将大量内容分组到不同的标签页下，使得页面布局更为清晰，用户可以快速切换和查看不同内容。而下拉菜单则是在鼠标悬停或点击主菜单项时，自动展开的子菜单，提供更细化...
jQuery Tab菜单菜单插件
03-04
本项目是关于使用jQuery实现一个功能丰富的Tab菜单插件，旨在为用户提供直观、动态的导航体验。下面我们将深入探讨jQuery Tab菜单的相关知识点。 1. **jQuery基础**：首先，你需要了解jQuery的基本语法，如选择器...
jquery实现未经美化的简洁TAB菜单效果
10-23
使用jQuery实现TAB菜单的核心在于事件监听与样式切换。通过监听鼠标点击事件，当用户点击不同的TAB项时，页面上对应的内容区域会展开或收起，同时高亮当前选中的TAB项。 2. **点击事件处理**： 在jQuery中，`....
jQuery实现Tab栏(选项卡)
托尼stark的博客
05-19 1179
效果图：鼠标滑过哪个button按钮，则下面显示对应button的内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
用jquery实现Tab切换菜单
webnoob
03-19 1951
1.效果图： 2.html和jq代码： Document tab1 tab2 tab3 内容1 内容2 内容3 $(document).ready(function() { $(".contxt .txt").eq(0).show().siblings().hide()
Tab切换栏(jQuery方法实现)
愤怒的菜鸟
10-29 8177
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; *{margin
JS / JQ 简单实现tab栏
Bigfishseasugar
06-01 501
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 使用style修改样式 --.
使用itextpdf5.x将网页转为PDF,并添页眉页脚页码
qingqingzijinxin的专栏
08-23 173
itextpdf，html转pdf
基于ssm和vue的 校园短期闲置资源置换平台源码 校园短期闲置资源置换平台代码（高分毕设项目源码）
08-23
1. 校园短期闲置资源置换平台代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：前端是vue，后端是ssm，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
4S店客户管理小程序-毕业设计，基于微信小程序+SSM+MySql开发，源码+数据库+论文答辩+毕业论文+视频演示
08-23
4S店客户管理小程序-毕业设计，基于微信小程序+SSM+MySql开发，源码+数据库+论文答辩+毕业论文+视频演示 社会的发展和科学技术的进步，互联网技术越来越受欢迎。手机也逐渐受到广大人民群众的喜爱，也逐渐进入了每个用户的使用。手机具有便利性，速度快，效率高，成本低等优点。 因此，构建符合自己要求的操作系统是非常有意义的。 本文从管理员、用户的功能要求出发，4S店客户管理系统中的功能模块主要是实现管理员服务端；首页、个人中心、用户管理、门店管理、车展管理、汽车品牌管理、新闻头条管理、预约试驾管理、我的收藏管理、系统管理，用户客户端：首页、车展、新闻头条、我的。门店客户端：首页、车展、新闻头条、我的经过认真细致的研究，精心准备和规划，最后测试成功，系统可以正常使用。分析功能调整与4S店客户管理系统实现的实际需求相结合，讨论了微信开发者技术与后台结合java语言和MySQL数据库开发4S店客户管理系统的使用。 关键字：4S店客户管理系统小程序 微信开发者 Java技术 MySQL数据库 软件的功能： 1、开发实现4S店客户管理系统的整个系统程序； 2、管理员服务端；首页、个人中心、用户管理、门店管理、车展管理、汽车品牌管理、新闻头条管理、预约试驾管理、我的收藏管理、系统管理等。 3、用户客户端：首页、车展、新闻头条、我的 4、门店客户端：首页、车展、新闻头条、我的等相应操作； 5、基础数据管理：实现系统基本信息的添加、修改及删除等操作，并且根据需求进行交流信息的查看及回复相应操作。
Java项目：基于SSM框架+mysql个性化美食推荐系统含源码和毕业论文
最新发布
08-23
一、项目简介 本项目是一套基于SSM框架+mysql个性化美食推荐系统含源码和毕业论文 包含：项目源码、数据库脚本等，该项目附带全部源码可作为毕设使用。 项目都经过严格调试，eclipse或者idea 确保可以运行！ 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值 二、技术实现 jdk版本：1.8 及以上 ide工具：IDEA或者eclipse 数据库: mysql5.5及以上 后端：spring+springmvc+mybatis+maven+mysql 前端：jsp，css，js 三、系统功能 1、系统角色主要包括：管理员、用户 2、系统功能 主要功能包括： 用户登录 用户注册 首页 个人中心 修改密码 管理员信息 用户管理 美食信息管理 美食信息留言管理 美食信息收藏管理 美食订单管理 博主推荐管理 店址管理 口味管理 轮播图管理 前台主要功能包括： 用户登录 用户注册 首页 个性美食展示 热门美食推荐 美食详情 点我收藏 立即预订 个人中心 美食收藏 美食订单 余额充值 发表留言 博主推荐 跳转到后台等功能
weixin237基于微信小程序的医院挂号预约系统ssm.zip
08-23
现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本微信小程序医院挂号预约系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此微信小程序医院挂号预约系统利用当下成熟完善的SSM框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的MySQL数据库进行程序开发。微信小程序医院挂号预约系统有管理员，用户两个角色。管理员功能有个人中心，用户管理，医生信息管理，医院信息管理，科室信息管理，预约信息管理，预约取消管理，留言板，系统管理。微信小程序用户可以注册登录，查看医院信息，查看医生信息，查看公告资讯，在科室信息里面进行预约，也可以取消预约。微信小程序医院挂号预约系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。
全面探索：jQuery特效与菜单插件集合
"该资源是一份全面介绍jQuery特效的教程集合，主要涵盖了各种类型的导航类效果，包括 accordions、tab选项卡、下拉菜单、滑动菜单等，适合于学习和参考JavaScript库jQuery中实现的各种交互式网页元素的动态效果。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值