转载的

演示地址:http://www.freejs.net/demo/29/index.html

首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09-09)

jquery实现简单的Tab切换菜单

 
 
 

js代码

JavaScript Code
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. //Default Action
  4. $(".tab_content").hide(); //Hide all content
  5. $("ul.tabs li:first").addClass("active").show(); //Activate first tab
  6. $(".tab_content:first").show(); //Show first tab content
  7. //On Click Event
  8. $("ul.tabs li").click(function() {
  9. $("ul.tabs li").removeClass("active"); //Remove any "active" class
  10. $(this).addClass("active"); //Add "active" class to selected tab
  11. $(".tab_content").hide(); //Hide all tab content
  12. var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
  13. $(activeTab).fadeIn(); //Fade in the active content
  14. return false;
  15. });
  16. });
  17. </script>

主要代码

XML/HTML Code
  1. <div class="container">
  2. <ul class="tabs">
  3. <li class="active"><a href="#tab1">导航菜单</a></li>
  4. <li><a href="#tab4">TAB标签</a></li>
  5. </ul>
  6. <div class="tab_container">
  7. <div id="tab1" class="tab_content" style="display: block; ">
  8. <h3><a href="http://www.freejs.net/article_daohangcaidan_13.html">jquery css多级下拉菜单</a></h3>
  9. <p id="">多级菜单,理论上支持无限多的层级,文件结构非常简单的,具体的请看下面的内容</p>
  10. </div>
  11. <div id="tab4" class="tab_content" style="display: none; ">
  12. <h2>各种tab标签选项卡</h2>
  13. <h3><a href="http://www.freejs.net/article_tabbiaoqian_17.html">tab标签页面,ajax载入</a></h3>
  14. <p> tab标签,jquery ajax载入数据库的内容</p>
  15. </div>
  16. </div>
  17. </div>

Jquery tab 选项卡 无刷新切换的更多相关文章

  1. jQuery实现无刷新切换主题皮肤功能

    主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验.本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能. 查看演示DEMO:https:// ...

  2. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  3. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

  4. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  5. 使用 pjax 实现无刷新切换页面

    一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...

  6. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  7. [Asp.net mvc]jquery.form.js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

  8. JQuery中国省市区无刷新三级联动查询

    之前有写过用<Ajax控件来实现中国的省市区无刷新查询> 今天用JQuery来实现,用Ajax控件和JQuery的优缺点就先不说了. 效果图如下: 下面来结合代码来详细说明一下如何用JQu ...

  9. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

随机推荐

  1. 在centos7上作用mongodb

    安装服务端 yum install mongodb-server 安装客户端 yum install mongodb 版本 mongo --version 是否安装了mongodbwhich mong ...

  2. python 安装模块步骤

    1.下载 pyocr-0.4.1.tar.gz   tar.gz文件  解压  放到 c:/python27 文件夹下面 C:\Python27\pyocr-0.4.1  直接 cmd 命令 进入   ...

  3. /proc/stat文件详解(翻译)

    原文地址:http://www.linuxhowtos.org/System/procstat.htm 各种关于系统内核的活动信息都可以在/proc/stat文件中找到,该文件记录了自系统第一次启动以 ...

  4. css——手机端图片正确显示

    这两天遇到的问题汇总(一): 1.图片在app端显示有差异:如下                        左边图片是:图片显示太大,以至于让整个页面都失真的效果:右边是调好样式之后的效果,知道增 ...

  5. 分布式系统中一些主要的副本更新策略——Dynamo/Cassandra/Riak同时采取了主从式更新的同步+异步类型,以及任意节点更新的策略。

    分布式系统中一些主要的副本更新策略. 1.同时更新 类型A:没有任何协议,可能出现多个节点执行顺序交叉导致数据不一致情况. 类型B:通过一致性协议唯一确定不同更新操作的执行顺序,从而保证数据一致性 2 ...

  6. wheel和staff分组

    1.只有属于wheel组的用户才可以用su登录为root 2. 具体设置步骤如下: 1)修改 /etc/pam.d/su 文件,找到"#auth required /lib/security ...

  7. Android 命令管理项目

    今天介绍一下Android怎么用命令管理项目,用命令管理Android项目需要用到Android命令,首先介绍一下用Android命令创建新项目,打开命令提示窗口,导航到Android SDK 的to ...

  8. jquery Mobile弹出窗

    先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" da ...

  9. 人脸识别SDK小结

    Face++人脸识别 进入官网 Face++ 致力于研发世界最好的人脸技术,提供免费的API和SDK供企业和开发者调用,更有灵活的定制化服务满足不同需求.已有多家公司使用Face++技术服务,完成包括 ...

  10. C#日志记录函数

    错误日志记录在程序运行的实际维护中定位问题具有很大作用,日志越详细,反馈处理问题越方便. 常用的一个B/S架构下的日志函数. //日志记录函数 private void WriteLog( strin ...