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实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
信息滚动效果的实例讲解
Sep 18 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
特殊日期提示功能的实现方法
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中利用XML技术构造远程服务(上)
2006/10/09 PHP
php学习 字符串课件
2008/06/15 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
js 判断 enter 事件
2009/02/12 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
微信小程序实现签字功能
2019/12/23 Javascript
vue实现放大镜效果
2020/09/17 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
详解Django的CSRF认证实现
2018/10/09 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
超市营业员求职简历的自我评价
2013/10/17 职场文书
门卫岗位职责
2013/11/15 职场文书
社区学习十八大感想
2014/01/22 职场文书
奠基仪式主持词
2014/03/20 职场文书
《海上日出》教学反思
2016/02/23 职场文书