Jquery tab 选项卡 无刷新切换
转载的
演示地址:http://www.freejs.net/demo/29/index.html
jquery实现简单的Tab切换菜单

js代码
- <script type="text/javascript">
- $(document).ready(function() {
- //Default Action
- $(".tab_content").hide(); //Hide all content
- $("ul.tabs li:first").addClass("active").show(); //Activate first tab
- $(".tab_content:first").show(); //Show first tab content
- //On Click Event
- $("ul.tabs li").click(function() {
- $("ul.tabs li").removeClass("active"); //Remove any "active" class
- $(this).addClass("active"); //Add "active" class to selected tab
- $(".tab_content").hide(); //Hide all tab content
- var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
- $(activeTab).fadeIn(); //Fade in the active content
- return false;
- });
- });
- </script>
主要代码
- <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>
Jquery tab 选项卡 无刷新切换的更多相关文章
- jQuery实现无刷新切换主题皮肤功能
主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验.本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能. 查看演示DEMO:https:// ...
- jQuery Tab选项卡切换代码
jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...
- JQuery 实现页面无刷新
对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...
- jquery tab选项卡、轮播图、无缝滚动
最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...
- 使用 pjax 实现无刷新切换页面
一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- [Asp.net mvc]jquery.form.js无刷新上传
写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...
- JQuery中国省市区无刷新三级联动查询
之前有写过用<Ajax控件来实现中国的省市区无刷新查询> 今天用JQuery来实现,用Ajax控件和JQuery的优缺点就先不说了. 效果图如下: 下面来结合代码来详细说明一下如何用JQu ...
- jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...
随机推荐
- 在centos7上作用mongodb
安装服务端 yum install mongodb-server 安装客户端 yum install mongodb 版本 mongo --version 是否安装了mongodbwhich mong ...
- python 安装模块步骤
1.下载 pyocr-0.4.1.tar.gz tar.gz文件 解压 放到 c:/python27 文件夹下面 C:\Python27\pyocr-0.4.1 直接 cmd 命令 进入 ...
- /proc/stat文件详解(翻译)
原文地址:http://www.linuxhowtos.org/System/procstat.htm 各种关于系统内核的活动信息都可以在/proc/stat文件中找到,该文件记录了自系统第一次启动以 ...
- css——手机端图片正确显示
这两天遇到的问题汇总(一): 1.图片在app端显示有差异:如下 左边图片是:图片显示太大,以至于让整个页面都失真的效果:右边是调好样式之后的效果,知道增 ...
- 分布式系统中一些主要的副本更新策略——Dynamo/Cassandra/Riak同时采取了主从式更新的同步+异步类型,以及任意节点更新的策略。
分布式系统中一些主要的副本更新策略. 1.同时更新 类型A:没有任何协议,可能出现多个节点执行顺序交叉导致数据不一致情况. 类型B:通过一致性协议唯一确定不同更新操作的执行顺序,从而保证数据一致性 2 ...
- wheel和staff分组
1.只有属于wheel组的用户才可以用su登录为root 2. 具体设置步骤如下: 1)修改 /etc/pam.d/su 文件,找到"#auth required /lib/security ...
- Android 命令管理项目
今天介绍一下Android怎么用命令管理项目,用命令管理Android项目需要用到Android命令,首先介绍一下用Android命令创建新项目,打开命令提示窗口,导航到Android SDK 的to ...
- jquery Mobile弹出窗
先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" da ...
- 人脸识别SDK小结
Face++人脸识别 进入官网 Face++ 致力于研发世界最好的人脸技术,提供免费的API和SDK供企业和开发者调用,更有灵活的定制化服务满足不同需求.已有多家公司使用Face++技术服务,完成包括 ...
- C#日志记录函数
错误日志记录在程序运行的实际维护中定位问题具有很大作用,日志越详细,反馈处理问题越方便. 常用的一个B/S架构下的日志函数. //日志记录函数 private void WriteLog( strin ...