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 相关文章推荐
web性能优化之javascript性能调优
Dec 28 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 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下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP Session机制简介及用法
2014/08/19 PHP
php实现可逆加密的方法
2015/08/11 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
JavaScript中的Window窗口对象
2008/01/16 Javascript
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
python采集微信公众号文章
2018/12/20 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
自荐信的禁忌和要点
2013/10/15 职场文书
年度考核自我鉴定
2013/11/09 职场文书
安全生产大检查方案
2014/05/07 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
家访教师心得体会
2016/01/23 职场文书