安科网

AJAX jQuery tab选项卡

hackcat

hackcat

2013-10-30

关注 关注

AJAX jQuery tab选项卡

 加载的是存在的页面，可以根据需要加载参数

AJAX jQuery tab选项卡
演示
XML/HTML Code
  1. <ul id="navigation">  
  2.    <li><a href="#page1">asp</a></li>  
  3.    <li><a href="#page2">php</a></li>  
  4.    <li><a href="#page3">html</a></li>  
  5.    <li><a href="#page4">js</a></li>  
  6.    <li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li>  
  7.    </ul>  
  8.      
  9.    <div class="clear"></div>  
  10.      
  11.    <div id="pageContent">  
  12.    page1</div>  
  13.      
  14.    </div>  
  15.    <div class="clear"></div>  
JavaScript Code
  1. var default_content="";  
  2.   
  3. $(document).ready(function(){  
  4.       
  5.     checkURL();  
  6.     $('ul li a').click(function (e){  
  7.   
  8.             checkURL(this.hash);  
  9.   
  10.     });  
  11.       
  12.     //filling in the default content  
  13.     default_content = $('#pageContent').html();  
  14.       
  15.       
  16.     setInterval("checkURL()",250);  
  17.       
  18. });  
  19.   
  20. var lasturl="";  
  21.   
  22. function checkURL(hash)  
  23. {  
  24.     if(!hash) hash=window.location.hash;  
  25.       
  26.     if(hash != lasturl)  
  27.     {  
  28.         lasturl=hash;  
  29.           
  30.         // FIX - if we've used the history buttons to return to the homepage,  
  31.         // fill the pageContent with the default_content  
  32.           
  33.         if(hash=="")  
  34.         $('#pageContent').html(default_content); 
  35.          
  36.         else 
  37.         loadPage(hash); 
  38.     } 
  39. } 
  40.  
  41.  
  42. function loadPage(url) 
  43. { 
  44.     url=url.replace('#page',''); 
  45.      
  46.     $('#loading').css('visibility','visible'); 
  47.      
  48.     $.ajax({ 
  49.         type: "POST", 
  50.         url: "load_page.php", 
  51.         data: 'page='+url, 
  52.         dataType: "html", 
  53.         success: function(msg){ 
  54.              
  55.             if(parseInt(msg)!=0) 
  56.             { 
  57.                 $('#pageContent').html(msg); 
  58.                 $('#loading').css('visibility','hidden');  
  59.             }  
  60.         }  
  61.           
  62.     });  
  63.   
  64. }  

 load_page.php

PHP Code
  1. <?php  
  2.   
  3. if(!$_POST['page']) die("0");  
  4.   
  5. $page = (int)$_POST['page'];  
  6.   
  7. if(file_exists('pages/page_'.$page.'.html'))  
  8. echo file_get_contents('pages/page_'.$page.'.html');  
  9.   
  10. else echo 'There is no such page!';  
  11. ?>  


原文地址:http://www.freejs.net/article_tabbiaoqian_71.html

选项卡 padding margin jquery

hackcat

hackcat

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

第一阶段冲刺7

初步整合三部分代码，修复漏洞！昨天基本完成了APP界面下方的选项卡的操作，今天对他的样式进行了一定优化，并且正在学习并尝试制作APP的第一个功能界面，但是我对Androidstudio的界面的格式的布局还不是很了解，以至于不能成功绘画出课程表的表格布局，遇

APCDE 2020-06-11

想自学前端，该怎么开始学，从哪学起呢？

HTML和CSS是Web开发的基本构建块。无论您的Web应用程序有多先进，或者使用什么框架和后端语言，都必须使用HTML和CSS构建前端应用程序。因此，这是在Web开发中要学习的第一件事。CSS基础知识颜色，字体，位置，盒子模型等。CSS Grid和Fle

viewerlin 2020-05-25

Android基础——高级UI组件：选项卡

--选项卡里面需要两个布局文件：一个是上面标签的布局，一个是下面内容的布局-->

安辉 2020-01-25

TotalFinder for Mac(Finder增强工具)：双模式

下面给大家带来TotalFinder for Mac：双模式，希望能够帮助大家更快的熟悉TotalFinder for Mac这款Finder增强工具！同时本站也上线了TotalFinder for Mac中文版，喜欢这款软件的可以来本站下载体验！双模式是

adc00 2020-01-04

fiddler——查看http响应

http响应可能是一个html文件、可能是一个图片、可能是一个json等。、如果http响应是html文档，可以使用web view选项卡来查看；、如果http响应是json，可以使用json tab选项卡来格式化json；

老高 2019-12-30

Android开发：制作底部选项卡TabHost

<TabHost. android:id="@android:id/tabhost". <LinearLayout. <!<FrameLayout. <TabWidget. android:id="

luoj 2011-09-13

在红旗Linux中的ftp实验配置过程

1打开图形管理工具 2 默认FTP站点上点击右键在选择属性。绝对路径选择项选择“浏览”并指定到／DATA目录中。在第75行修改内容为。1以外的所有主机都可以访问FTP服务器。欢迎和退出对话框中可以输入用户登录FTP服务器和退出登录时的文字信息。单击应用、确

xiaoguolaoshi 2008-07-20

Android 选项卡(TabHost)例子

在Android中实现选项卡的效果可以通过两种方式：在布局文件中引用TabHost，在Activity中通过Id获取TabHost的实例，或者直接继承TabActivity，直接获取TabHost的实例。-- set the tab title attri

Rgenxiao 2011-09-08

jquery tab选项卡，支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换

支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换图片就不上了，很多效果，直接看演示演示地址:http://www.corange.cn/demo/3803/index.html<!DOCTYPE html PUBLIC "-//W3C//

支离破碎 2014-06-30

简单的jQuery选项卡插件

原理其实也是很简单的，关键在于样式的定义。原本想直接使用jquery的 ui，无奈懒得理，感觉jquery ui很强大，但是用起来也很麻烦，要引用的样式也多。主要是样式不好修改。并且我也只想使用选项卡的功能，何必整这么多样式呢。

qiuhaotc 2012-02-19

jQuery插件应用之 --- 选项卡插件的使用

jQuery UI插件折叠板可以实现页面中指定区域的折叠效果，这种效果称”手风琴”，即通过单击某个面板中的标题栏，就会展开相应的内容，当点击其他面板标题栏时，已展开的内容会自动关闭，通过这种方式，实现多个面板数据在一个页面中有序展示。collapsible

85931235 2012-03-28

微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

本文实例讲述了微信小程序开发实现的选项卡页面切换功能。分享给大家供大家参考，具体如下：。总算做出来了.分享出来看看.'on' : ''}}" data-current="0" bindtap="swichNav&qu

bruceli 2019-05-14

基于jquery实现的tab选项卡功能示例【附源码下载】

本文实例讲述了基于jquery实现的tab选项卡功能。分享给大家供大家参考，具体如下：。jquery这款杀手级别的js框架，显然已成了开发界的标准js库，在开发一般web应用的时候，常常用到。今天找到一个实现jquery tab页的插件，效果还不错，比自己

南城小伙 2019-06-10

jquery实现选项卡切换代码实例

选项卡在网页中很常见，可以说是必备的一个元素了，网上其实也有很多案例讲解选项卡的做法，各种炫酷。写这篇文章，就是记录下自己的一个练手Demo了。主要逻辑就在于找到选项卡和内容框相对应的下标。以上所述是小编给大家介绍的jquery实现选项卡切换详解整合，希望

逆风飞舞0 2019-05-14

[转] CentOS 安装中文输入法

在linuxCentOS中安装完中文输入法之后，还不能使用，必须进行相应的设置，就如同在windows中设置中文输入法一样，必须把刚刚安装的输入法添加爱到输入法列表中。

87530399 2014-05-26

Win10系统IE11兼容性的具体设置方法

　　现在很多使用Windows系统的用户都在考虑，自己是否需要将系统升级到Win10系统，而很多用户主要是考虑到Win10系统的兼容性如何。要是和Win10以前的系统相比较，其实Win10系统的兼容性肯定没那么好，但随着微软的不断完善，所以Win10对兼容

chenyangah 2017-03-31

Win10 PC预览版14971已修复和已知问题汇总

微软今天向快速通道Insider成员推送了Windows 10创造者更新预览版14971，带来一些新功能，下面我们来看下已修复和已知问题。最初在14926版本中引入，Microsoft Edge中的选项卡上的实验性“Snooze”操作，为您提供一种方法来设

84236532 2016-11-17

如何解决WinXP电脑IE提示“此选项卡已经恢复”

　　WinXP电脑IE提示“此选项卡已经恢复”的解决方法就讲到这里了，只要在IE浏览器的Internet选项进行一些设置，之后重启就可以了。

zhangpuego 2016-07-16

Win10系统无法识别USB设备的解决方法

最近老是有用户反应Win10系统的电脑总是出现USB接口无法识别设备的问题，导致U盘、移动硬盘等无法使用，甚至连本来正常连接的USB鼠标都发生了异常，这严重影响了用户Win10系统的使用。下面小编就给大家带来解决办法，一起来看看吧。　　4.在任务管理器的“

Jiminull 2016-03-03

Win10以太网属性空白布线时网络选项卡该怎么办?

我们一般会在网络适配器属性中修改网络DNS和IP，在Win10中本地连接适配器一般被命名为以太网，有时打开以太网属性在网络选项卡中会发现列表显示为空白，如下图所示：。在任务栏搜索框中输入“服务”，回车打开服务。找到名为Network Setup Servi

小李匪盗 2015-12-21
hackcat

hackcat

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号