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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 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 使用post,get的一种简洁方式
2010/04/25 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
Z-Blog中用到的js代码
2007/03/15 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
python3序列化与反序列化用法实例
2015/05/26 Python
python框架django基础指南
2016/09/08 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
Python饼状图的绘制实例
2019/01/15 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
Python如何读取、写入CSV数据
2020/07/28 Python
python中温度单位转换的实例方法
2020/12/27 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
售房委托书
2014/08/30 职场文书
2014年党支部工作总结
2014/11/13 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
交通安全温馨提示语
2015/07/14 职场文书
董事长年会致辞
2015/07/29 职场文书
react antd实现动态增减表单
2021/06/03 Javascript