html5 tab菜单切换页面,jquery实现简单Tab切换菜单效果

本文实例为大家分享了jquery Tab切换菜单的实现代码，供大家参考，具体内容如下

实现tab切换的主要html代码：

• 导航菜单
• TAB标签

jquery css多级下拉菜单

多级菜单，理论上支持无限多的层级，文件结构非常简单的，具体的请看下面的内容

各种tab标签选项卡

tab标签页面,ajax载入

tab标签，jquery ajax载入数据库的内容

实现tab切换的jquery代码：

$(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;

});

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。