JQ TAB ajax

!doctype html>
<html>
<head>
    <meta charset="gbk">
    <title>Tab </title>
    <style>
        *{margin: 0;padding: 0;}
        .tab{
            width: 375px;
            margin: 25px auto;
        }
        .tabTit li{
            float: left;
            width: 123px;
            height: 38px;
            border: 1px solid #00f;
            text-align: center;
            background: #ccf;
            line-height: 38px;
            list-style: none;
        }
        .tabTit li:hover{
            background: #aaf;
            cursor: hand;
            cursor: pointer;
        }
        .tabTit .select{
            background: #99f;
        }
        .tabCon{
            width: 373px;
            height: 400px;
            border: 1px solid #00f;
            border-top: none;
        }
        .tabCon h1{
            font-size: 24px;
        }
        .tabCon p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div id=‘tab‘ class=‘tab‘>
        <ul id=‘tabTit‘ class=‘tabTit‘>
            <li class=‘select‘>标题一</li>
            <li>标题二</li>
            <li>标题三</li>
        </ul>
        <div class=‘tabCon‘>
            <h1 id=‘tabConTit‘>title</h1>
            <p id=‘tabInf‘>some words ...............................................</p>
        </div>
    </div>
</body>
<script src=‘js/jquery.min.js‘></script>
<script>
    $(‘#tabTit li‘).click(function(){
        var index = $(this).index();
        $.getJSON(‘tab.json‘,function(data){
            $(‘#tabConTit‘).html(data[index].tit);
            $(‘#tabInf‘).html(data[index].con);
        })
        $(this).addClass(‘select‘).siblings().removeClass(‘select‘);
    });
</script>
</html>
时间: 2024-10-25 00:37:57

JQ TAB ajax的相关文章

jq中ajax的使用

jq中ajax必须在服务器环境下使用 $.ajax({ url:"json.json", //请求的url地址 dataType:"json", //返回格式为json type:"GET", //请求方式 beforeSend:function(){ $('#div3').html('加载中...') }, success:function(data,status){//第一个参数包含获取的内容,第二个参数为执行的状态 var tt="

(JS/JQ)与Ajax

JS与Ajax(异步JS和XML): 1.XMLHttpRequest对象的常用方法: open()准备请求   send()传送请求   abort()取消请求 readyState(请求状态码):0(未开始).1(开启).2(已传送).3(接收中).4(已载入) status(HTTP请求状态码):404(找不到文件).200(OK) onreadystatechange:请求状态改变时会被调用函数引用 responseText:服务器返回的纯文本字符串 responseXML:服务器返回的

js实现jq的ajax

本文将介绍如何使用js封装一段代码,实现jq的ajax功能,每一步代码均有注释便于理解 实现代码 function ajax(){ //获取ajax的相应值(请求类型,请求地址,同步或异步,传递数据,接收数据类型,成功失败函数等) var ajaxData = { type:arguments[0].type || "GET", url:arguments[0].url || "", async:arguments[0].async || "true&qu

关于jQ的Ajax操作

jQ的Ajax操作 什么是AJAX AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 它不是一门编程语言,而是利用JavaScript在保证页面不被刷新.页面链接不改变的情况下与服务器交换数据并更新部分网页的技术. 对于传统的网页,如果想更新内容,那么必须要刷新整个页面,但有了Ajax,便可以在页面不被全部刷新的情况下更新其内容.在这个过程中,页面实际上是在后台与服务器进行了数据交互,获得数据之后,再利用JavaScript改变页

前端 jq的ajax请求

jq的ajax请求 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax</title> </head> <body> <h1>ajax请求</h1> <input type="text" name="username" id="user

jq的ajax方法

相较与js异步对象的繁琐,jq的ajax对象结构更加清晰 一:ajax对象简述 ajax(Asynchronous JavaScript and XML),异步的xml和js对象,主要用于在不刷新全局页面的基础上,更新局部页面,多用于表单提交,搜索更新 在jq中的ajax对象的格式为: $.ajax({ // some code... }) js的ajax对象在此不多赘述 二:各类属性 一个完整的ajax对象起码应该有四个属性:type, url,data,success 1.type 这个是a

常用到jq的ajax

1.jq 中的 ajax $(document).ready(function(){ $("#result").bind("input propertychange",function(){ $.ajax({ url:"baiduServlet", //服务器地址 async:true, //用同步请求,默认为true异步请求 cache:true, //缓存数据 data:{result:$("#result").val()

phpExcel与jq的ajax

有时我们的需求总会出现一些自己觉得很奇怪的需求, 但如果效果出来了,又觉得很新颖,然后这些新颖的 东西,就是这些奇怪的需求而来的,所以别对自己不能 的事情觉得不应该有,而是挑战它,用自己所懂得语言 完成它. xls格式的文件在页面展示就是一个感觉就是前端无法实现的活,但 却可以实现,只是它需要后台帮忙转换,应该数据流在前端无法被转换 成我们所需的数据结构. php: <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); in

js jq封装ajax方法

json文本格式 { "userInfo":[ {name:"admin",password:"123"}, {name:"admin1",password:"123"} ] } js: window.onload=function(){ var txtName=..; var txtPwd=..; var url="Login.aspx?name="+txtName.value+&qu