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 相关文章推荐
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
一个可复用的vue分页组件
May 15 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
vue项目中用cdn优化的方法
Jan 03 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
AJAX实现省市县三级联动效果
Oct 16 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作的文本留言本的例子(一)
2006/10/09 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
玩转方法:call和apply
2014/05/08 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
Python常用随机数与随机字符串方法实例
2015/04/09 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
python设置随机种子实例讲解
2019/09/12 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
物业保安岗位职责
2014/07/02 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书