jquery实现简单Tab切换菜单效果


Posted in Javascript onJuly 17, 2020

本文实例为大家分享了jquery Tab切换菜单的实现代码,供大家参考,具体内容如下

实现tab切换的主要html代码:

<div class="container"> 
  
 <ul class="tabs"> 
  <li class="active"><a href="#tab1">导航菜单</a></li> 
  <li><a href="#tab4">TAB标签</a></li> 
 </ul> 
 <div class="tab_container"> 
  <div id="tab1" class="tab_content" style="display: block; "> 
   
  <h3><a href="http://www.freejs.net/article_daohangcaidan_13.html">jquery css多级下拉菜单</a></h3> 
  <p id="">多级菜单,理论上支持无限多的层级,文件结构非常简单的,具体的请看下面的内容</p> 
  </div> 
  
  <div id="tab4" class="tab_content" style="display: none; "> 
  <h2>各种tab标签选项卡</h2> 
  <h3><a href="http://www.freejs.net/article_tabbiaoqian_17.html">tab标签页面,ajax载入</a></h3> 
   
  <p> tab标签,jquery ajax载入数据库的内容</p> 
  </div> 
 </div> 
 
 </div>

实现tab切换的jquery代码: 

<script type="text/javascript"> 
 
$(document).ready(function() { 
 
 //默认active 
 $(".tab_content").hide(); //隐藏全部的tab菜单内容
 $("ul.tabs li:first").addClass("active").show(); //对第一个li标签添加class="active属性" 
 $(".tab_content:first").show(); //显示第一个tab内容 
 
 //点击事件 
 $("ul.tabs li").click(function() { 
 $("ul.tabs li").removeClass("active"); //移除class="active"属性
 $(this).addClass("active"); //添加class="active"到选择标签中 
 $(".tab_content").hide(); //隐藏全部标签内容 
 var activeTab = $(this).find("a").attr("href"); //找到所属属性值来识别活跃选项卡和内容 
 $(activeTab).fadeIn(); //使内容消失 
 return false; 
 }); 
 
}); 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的3d效果实现代码
Mar 23 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
javascript操作表格排序实例分析
May 06 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
特殊日期提示功能的实现方法
Jun 16 #Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 #Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 #Javascript
客户端验证用户名和密码的方法详解
Jun 16 #Javascript
检查表单元素的值是否为空的实例代码
Jun 16 #Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 #Javascript
基于JS代码实现实时显示系统时间
Jun 16 #Javascript
You might like
php对数组排序的简单实例
2013/12/25 PHP
php实现简单文件下载的方法
2015/01/30 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
javascript中new关键字详解
2015/12/14 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
js实现搜索栏效果
2018/11/16 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
Python实现两款计算器功能示例
2017/12/19 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
详解python编译器和解释器的区别
2019/06/24 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
北大自主招生自荐信
2013/10/19 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
二审答辩状范文
2015/05/22 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
Flink 侧流输出源码示例解析
2022/09/23 Servers