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 相关文章推荐
js创建元素(节点)示例
Jan 02 Javascript
详解javascript遍历方式
Nov 11 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
OpenLayer学习之自定义测量控件
Sep 28 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
PHP中动态显示签名和ip原理
2007/03/28 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
javascript import css实例代码
2008/07/18 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
住宅使用说明书
2014/05/09 职场文书
大学生创业事迹材料
2014/12/30 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
黄河绝恋观后感
2015/06/08 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript