jquery php ajax tab选项卡效果

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jquery php教程 ajax tab选项卡效果</title>
<link rel="stylesheet" type="text/css教程" href="demo.css" />
<script type="text/网页特效" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

</head>

<body>

<div id="rounded">
<img src="img/top_bg.gif" alt="top" /><div id="main" class="container">
    <h1>a simple ajax driven jquery website</h1>
    <h2>because simpler is better</h2>
   
    <ul id="navigation">
    <li><a href="#page1">page 1</a></li>
    <li><a href="#page2">page 2</a></li>
    <li><a href="#page3">page 3</a></li>
    <li><a href="#page4">page 4</a></li>
    <li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li>
    </ul>
   
    <div class="clear"></div>
   
    <div id="pagecontent">
    hello, this is a demo for a <a href="http://tutorialzine.com/2009/09/simple-ajax-website-jquery/" target="_blank">tutorialzine tutorial</a>. to test it, click some of the buttons above. have a nice stay!</div>
   
    </div>
    <div class="clear"></div>
<img src="img/bottom_bg.gif" alt="bottom" /></div>

<div align="center" class="demo">
this is a <a href="http://tutorialzine.com/" target="_blank">tutorialzine</a> demo</div>

</body>
</html>

源码下载地址

http://down.111cn.net/down/code/php/xiaotoucaiji/2010/0904/20633.html

时间: 2024-10-26 08:17:22

jquery php ajax tab选项卡效果的相关文章

jquery 淡入淡出tab 选项卡效果

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>简洁实用的淡入淡出选项卡菜单</ti

二款实例Jquery tab选项卡效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

jQuery实现滚动切换的tab选项卡效果代码_jquery

本文实例讲述了jQuery实现滚动切换的tab选项卡效果代码.分享给大家供大家参考.具体如下: 这里介绍的jquery tab选项卡滚动动态切换代码,似乎很个性的网页选项卡,没有边框的修饰,但十分简约大方,选项卡菜单目前在各大网站很流行,做为前端设计者,能够得心应手的写出一个选项卡是很有必要的哦,希望本代码能为您带去一份参考资料. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-cha-tab-nav-style-

jquery实现通用的内容渐显Tab选项卡效果_jquery

本文实例讲述了jquery实现通用的内容渐显Tab选项卡效果.分享给大家供大家参考.具体如下: 这是一款网页常用的TAB选项卡功能,无鼠标操作的时候它可以自动轮换,美化一般,看上去有些粗糙,有兴趣使用的朋友可以进行细致修饰,相信会更漂亮的. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-info-tab-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X

jquery实现超简洁的TAB选项卡效果代码_jquery

本文实例讲述了jquery实现超简洁的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款超简洁的TAB选项卡,个人觉得有点太简单,简单的有点不习惯,美化修饰一下其实效果更好.实际上应该为点击过的TAB添加一个背景色,区分一下,这样比较好. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-easy-tab-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C

jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果_jquery

本文实例讲述了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果.分享给大家供大家参考.具体如下: 这款网页特效主要是tytabs.jquery.min.js插件的实例演示,一个带有漂亮渐变效果的TAB选项卡,演示了一个网页上设置两个选项卡,都是带有淡入淡出的渐变效果,为了演示效果,里面我随便弄了些文字,用时候自己删除吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tytabs-tab-cha-m

jQuery实现tab选项卡效果的方法_jquery

本文实例讲述了jQuery实现tab选项卡效果的方法.分享给大家供大家参考.具体如下: var tabs = { init: function(){ var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav'); $tab_contents.find('.tab-content:not(:first)').hide(); $tab_nav.find('li:first').addClass('active'); $tab_nav.on(

JQuery Tab选项卡效果代码改进版_jquery

介绍的是基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离.在实际应用过程中,只 要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. 在这里,我又做了部分的修改,增加了选项卡可自动切换功能,以及选项卡点击相应还是鼠标放上后相应的参数,同时依然支持多次调用. 现在,我把代码贴上,与众博友共享 这是js脚本 复制代码 代码如下: /* jque

Android利用Fragment实现Tab选项卡效果_Android

利用Fragment实现Tab选项卡效果:  将RadioGroup与Fragment集合,实现tab选项卡效果,这里面最关键的几个文件:  1.FragmentTabAdapter类: /** *@Description: *@Author:Nate Robinson *@Since:2015-2-12 */ public class FragmentTabAdapter implements RadioGroup.OnCheckedChangeListener { private List<