ajax实现tab切换效果

最新推荐文章于 2021-06-20 23:50:43 发布
最新推荐文章于 2021-06-20 23:50:43 发布
阅读量2.3k 收藏 1
点赞数 1
文章标签： ajax xmlhttprequest stylesheet function exception html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaocai06/article/details/6228421
版权

ajax的HelloWorld会写了，也算是我进门了，慢慢来吧，这次准备写一个tab切换的效果，以前都是页面初次加载，就将所有帧的内容都读出来，然后触发事件，让层显示或者消失就ok。这次想来个ajax版的，也就是页面初次加载只加载第一帧的内容，然后鼠标挪上去切换帧异步读取数据，就这么简单。

程序设计思路：

1，页面初次加载，绑定window.onload事件，异步读取works_0.xml文件中的内容并显示，一帧一个xml文件，帧切换其实就是读取不同的xml文件。

2，鼠标挪上去，触发一个异步请求，读取相应的xml文件

3，解析xml文件内容

4，拼接html字符串

5，使用innerHTML方法显示到指定div中

容易忽略的问题：

1，鼠标挪到当前的标签，就不应该触发请求，应当做个判断

2，每一帧的请求只请求一次，然后将数据保存起来，触发请求前应当判断，如是第一次触发，请求；如是非第一次则不请求，直接将第一次请求保存的结果显示。我是在页面使用了一个hidden，将结果保存到了它的Value值当中，当然也有其他办法，以后再说。

3，加载xml字符串进行处理的时候，IE和FF的方法不一样，应当注意，我在网上搜了一段通用函数用上了^_^

4，好像没有什么了.......

html代码：

view plaincopy to clipboardprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> 
        <meta http-equiv="pragma" content="no-cache"> 
        <title>myTino月度优秀会员作品展示</title> 
        <link type="text/css" href="css/reset.css" mce_href="css/reset.css" rel="stylesheet" media="all" /> 
        <link type="text/css" href="css/default.css" mce_href="css/default.css" rel="stylesheet" media="all" /> 
        <!--[if IE 7]> 
            <link type="text/css" href="css/ie7.css" mce_href="css/ie7.css" rel="stylesheet" media="screen" /> 
        <![endif]--> 
        <!--[if IE 6]> 
            <link type="text/css" href="css/ie6.css" mce_href="css/ie6.css" rel="stylesheet" media="screen" /> 
        <![endif]--> 
        <mce:script type="text/javascript" src="js/works.js" mce_src="js/works.js"></mce:script> 
    <?php include_once("../header_index.php");?> 
        <div id="wrap"> 
            <div id="header"></div> 
            <div id="bodyContent"> 
                <div id="tabs" class="clearfix"> 
                    <ul> 
                        <li class="curTab" οnmοuseοver="changeTab(this,'works_0');"><h2>最近7天优秀作品</h2& gt;</li> 
                        <li οnmοuseοver="changeTab(this,'works_1');"><h2>本月度优秀作品</h2></li> 
                        <li οnmοuseοver="changeTab(this,'works_2');"><h2>随机推荐作品</h2></li> 
                    </ul> 
                </div> 
                <div id="worksContent"> 
                        <ul id="works" class="works clearfix"> 
                             
                        </ul> 
                </div> 
            </div> 
            <div id="footer"></div> 
        <?php require_once("../../templates/foot.php")?> 
        </div> 
        <input type="hidden" id="works_0" value="" /> 
        <input type="hidden" id="works_1" value="" /> 
        <input type="hidden" id="works_2" value="" /> 
        <?php include_once("../../commonphp/google_analytics.php");?> 
         
    </body> 
</html> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <meta http-equiv="pragma" content="no-cache">
        <title>myTino月度优秀会员作品展示</title>
        <link type="text/css" href="css/reset.css" mce_href="css/reset.css" rel="stylesheet" media="all" />
        <link type="text/css" href="css/default.css" mce_href="css/default.css" rel="stylesheet" media="all" />
        <!--[if IE 7]>
            <link type="text/css" href="css/ie7.css" mce_href="css/ie7.css" rel="stylesheet" media="screen" />
        <![endif]-->
        <!--[if IE 6]>
            <link type="text/css" href="css/ie6.css" mce_href="css/ie6.css" rel="stylesheet" media="screen" />
        <![endif]-->
        <mce:script type="text/javascript" src="js/works.js" mce_src="js/works.js"></mce:script>
    <?php include_once("../header_index.php");?>
        <div id="wrap">
            <div id="header"></div>
            <div id="bodyContent">
                <div id="tabs" class="clearfix">
                    <ul>
                        <li class="curTab" οnmοuseοver="changeTab(this,'works_0');"><h2>最近7天优秀作品</h2& gt;</li>
                        <li οnmοuseοver="changeTab(this,'works_1');"><h2>本月度优秀作品</h2></li>
                        <li οnmοuseοver="changeTab(this,'works_2');"><h2>随机推荐作品</h2></li>
                    </ul>
                </div>
                <div id="worksContent">
                        <ul id="works" class="works clearfix">
                          
                        </ul>
                </div>
            </div>
            <div id="footer"></div>
        <?php require_once("../../templates/foot.php")?>
        </div>
        <input type="hidden" id="works_0" value="" />
        <input type="hidden" id="works_1" value="" />
        <input type="hidden" id="works_2" value="" />
        <?php include_once("../../commonphp/google_analytics.php");?>
      
    </body>
</html>

 
css样式：

view plaincopy to clipboardprint?
/* General */ 
body {  
    text-align:center;  
    background:#F1F1F1;  
    width:980px;  
}  
/* layerout*/ 
#wrap {  
    width:980px;  
    margin:10px auto;  
    text-align:left;  
}  
#header {  
    background:url(../images/works_header.gif);  
    height:180px;  
}  
#bodyContent {  
    margin-bottom:10px;  
    border:solid 1px #ccc;  
}  
.last {  
    margin-right:0;  
}  
/* clear both */ 
.clearfix {display: inline-block;}  
/* Hides from IE-mac /*/ 
* html .clearfix {height: 1%;}  
.clearfix {display: block;}  
/* End hide from IE-mac */ 
.clearfix:after {  
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden 
}  
/* End layerout*/ 
/* @navigation */ 
#tabs {  
    display:inline-block;  
}  
#tabs li {  
    background:url("../images/tab_bg.gif") repeat-x;  
    float:left;  
    width:200px;  
    height:33px;  
    border-left:solid 1px #fff;  
    border-right:solid 1px #cecece;  
    cursor:pointer;  
}  
#tabs h2 {  
    height:33px;  
    line-height:33px;  
    text-align:center;  
}  
#tabs .curTab {  
    background:#ffffff;  
    border-right:0;  
    font-weight:bold;  
}  
/* End navigation */ 
/* @worksContent */ 
#worksContent {  
    padding:15px;  
    _padding:10px;  
    background-color:#fff;  
}  
#works li {  
    float:left;  
    width:186px;  
    height:134px;  
    margin:5px;  
    _margin:4px;  
    padding:20px;  
    background:url("../images/work_bg.gif");  
}  
#worksContent .works {  
     
}  
/* End worksContent */ 
/* General */
body {
    text-align:center;
    background:#F1F1F1;
    width:980px;
}
/* layerout*/
#wrap {
    width:980px;
    margin:10px auto;
    text-align:left;
}
#header {
    background:url(../images/works_header.gif);
    height:180px;
}
#bodyContent {
    margin-bottom:10px;
    border:solid 1px #ccc;
}
.last {
    margin-right:0;
}
/* clear both */
.clearfix {display: inline-block;}
/* Hides from IE-mac /*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}
/* End layerout*/
/* @navigation */
#tabs {
    display:inline-block;
}
#tabs li {
    background:url("../images/tab_bg.gif") repeat-x;
    float:left;
    width:200px;
    height:33px;
    border-left:solid 1px #fff;
    border-right:solid 1px #cecece;
    cursor:pointer;
}
#tabs h2 {
    height:33px;
    line-height:33px;
    text-align:center;
}
#tabs .curTab {
    background:#ffffff;
    border-right:0;
    font-weight:bold;
}
/* End navigation */
/* @worksContent */
#worksContent {
    padding:15px;
    _padding:10px;
    background-color:#fff;
}
#works li {
    float:left;
    width:186px;
    height:134px;
    margin:5px;
    _margin:4px;
    padding:20px;
    background:url("../images/work_bg.gif");
}
#worksContent .works {
  
}
/* End worksContent */

js代码：

view plaincopy to clipboardprint?
/** 
 * @author liuyong 
 */ 
var xmlHttp;  
var xmlDoc;  
var works_0 ='';  
var works_1 ='';  
var works_2 ='';    //标志变量，存储第一次请求拼好的content_str  
var divId = '';  
function loadXmlStr(strxml){ //兼容IE和FF的加载xml字符串的通用函数  
    try{  
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  
        xmlDoc.loadXML(strxml);  
    }  
    catch(e){  
        var oParser=new DOMParser();  
        xmlDoc=oParser.parseFromString(strxml,"text/xml");  
    }  
        return xmlDoc;  
}  
function createXMLHttpRequest(){  
    if(window.ActiveXObject){  /*在IE下初始化XMLHttpRequest对象 */ 
        try{  
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //新版本IE     
        }catch(otherMicrosoft){  
            try{  
                //较老版本的 Internet Explorer  
                xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");  
            }catch(failed){  
                // 还是失败，那么就认为创建失败……  
                   xmlHttp= false;  
            }  
        }  
    }else if(window.XMLHttpRequest){  
        xmlHttp = new XMLHttpRequest();  
    }  
    if(!xmlHttp){  
        alert("创建 XMLHttpRequest 对象失败!");      
    }  
}  
function startRequest(fileName){  
         
        divId = fileName;  
        createXMLHttpRequest();  
        try{  
            if(document.getElementById(fileName).value == '' ){  
                xmlHttp.onreadystatechange = handleStateChange;  
                xmlHttp.open("GET", "data/" + fileName + ".xml", true);  
                xmlHttp.send(null);  
            }else{  
                document.getElementById("works").innerHTML = document.getElementById(fileName).value;  
            }                 
        }catch(exception){  
            alert("您要访问的资源不存在!");  
        }     
}  
function handleStateChange(){  
    if(xmlHttp.readyState == 4){  
        if (xmlHttp.status == 200 || xmlHttp.status == 0){  
            // 取得XML的DOM对象  
            //alert(xmlHttp.responseText);  
            xmlDoc = loadXmlStr(xmlHttp.responseText);  
            // 取得XML文档的根  
            var root = xmlDoc.documentElement;  
            try 
            {  
                // 取得<works>结果  
                var works = root.getElementsByTagName('work');  
                //alert(works.length);  
                var userid;  
                var foldID;  
                var workid;  
                var content_str = '';  //拼好的HTML字符串  
                for(i = 0;i<works.length;i++){  
                    userid = works[i].getElementsByTagName("userid")[0].firstChild.nodeValue;  
                    foldID = works[i].getElementsByTagName("foldID")[0].firstChild.nodeValue;  
                    workid = works[i].getElementsByTagName("workid")[0].firstChild.nodeValue;  
                    content_str = content_str + '<li><a href="/" mce_href="/""http://www.mytino.com/cn/profile/profile_works_detail.php?workid=' + workid + '&foldID=' + foldID + '&type=2&userid=' + userid + '/" target=/"_blank/"><img src="/" mce_src="/""images/'+workid+'.jpg/" alt=/"/" /></a></li>';  
                     
                }  
                document.getElementById("works").innerHTML = content_str;  
                document.getElementById(divId).value = content_str;  
                divId = '';  
            }catch(exception)  
            {  
                alert("异常情况！");  
            }  
        }  
    }else{  
        document.getElementById("works").innerHTML = '<img src="/" mce_src="/""images/loading.gif/" />';  
    }  
     
}  
function changeText(str,element){  
    if(navigator.appName.indexOf("Explorer") > -1){  
        document.getElementById(element).innerText = str;  
    }else{  
        document.getElementById(element).textContent = str;  
    }  
}  
var arr_li;  
function changeTab(arg,con){  
    arr_li = document.getElementById("tabs").getElementsByTagName("li");  
    for(var i = 0;i<arr_li.length;i++){  
        arr_li[i].className = 'none';         
    }  
    arg.className = 'curTab';  
    if(arg.className == 'curTab'){  
        if (con == 'works_0') {  
            startRequest('works_0');  
        }else if(con == 'works_1'){  
            startRequest('works_1');  
        }else if(con == 'works_2'){  
            startRequest('works_2');  
        }     
    }     
}  
window.onload = function(){  
    startRequest('works_0');  
} 
/**
 * @author liuyong
 */
var xmlHttp;
var xmlDoc;
var works_0 ='';
var works_1 ='';
var works_2 ='';    //标志变量，存储第一次请求拼好的content_str
var divId = '';
function loadXmlStr(strxml){ //兼容IE和FF的加载xml字符串的通用函数
    try{
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.loadXML(strxml);
    }
    catch(e){
        var oParser=new DOMParser();
        xmlDoc=oParser.parseFromString(strxml,"text/xml");
    }
        return xmlDoc;
}
function createXMLHttpRequest(){
    if(window.ActiveXObject){  /*在IE下初始化XMLHttpRequest对象 */
        try{
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //新版本IE  
        }catch(otherMicrosoft){
            try{
                //较老版本的 Internet Explorer
                xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
            }catch(failed){
                // 还是失败，那么就认为创建失败……
                   xmlHttp= false;
            }
        }
    }else if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }
    if(!xmlHttp){
        alert("创建 XMLHttpRequest 对象失败!");   
    }
}
function startRequest(fileName){
      
        divId = fileName;
        createXMLHttpRequest();
        try{
            if(document.getElementById(fileName).value == '' ){
                xmlHttp.onreadystatechange = handleStateChange;
                xmlHttp.open("GET", "data/" + fileName + ".xml", true);
                xmlHttp.send(null);
            }else{
                document.getElementById("works").innerHTML = document.getElementById(fileName).value;
            }              
        }catch(exception){
            alert("您要访问的资源不存在!");
        }  
}
function handleStateChange(){
    if(xmlHttp.readyState == 4){
        if (xmlHttp.status == 200 || xmlHttp.status == 0){
            // 取得XML的DOM对象
            //alert(xmlHttp.responseText);
            xmlDoc = loadXmlStr(xmlHttp.responseText);
            // 取得XML文档的根
            var root = xmlDoc.documentElement;
            try
            {
                // 取得<works>结果
                var works = root.getElementsByTagName('work');
                //alert(works.length);
                var userid;
                var foldID;
                var workid;
                var content_str = '';  //拼好的HTML字符串
                for(i = 0;i<works.length;i++){
                    userid = works[i].getElementsByTagName("userid")[0].firstChild.nodeValue;
                    foldID = works[i].getElementsByTagName("foldID")[0].firstChild.nodeValue;
                    workid = works[i].getElementsByTagName("workid")[0].firstChild.nodeValue;
                    content_str = content_str + '<li><a href="/" mce_href="/""http://www.mytino.com/cn/profile/profile_works_detail.php?workid=' + workid + '&foldID=' + foldID + '&type=2&userid=' + userid + '/" target=/"_blank/"><img src="/" mce_src="/""images/'+workid+'.jpg/" alt=/"/" /></a></li>';
                  
                }
                document.getElementById("works").innerHTML = content_str;
                document.getElementById(divId).value = content_str;
                divId = '';
            }catch(exception)
            {
                alert("异常情况！");
            }
        }
    }else{
        document.getElementById("works").innerHTML = '<img src="/" mce_src="/""images/loading.gif/" />';
    }
  
}
function changeText(str,element){
    if(navigator.appName.indexOf("Explorer") > -1){
        document.getElementById(element).innerText = str;
    }else{
        document.getElementById(element).textContent = str;
    }
}
var arr_li;
function changeTab(arg,con){
    arr_li = document.getElementById("tabs").getElementsByTagName("li");
    for(var i = 0;i<arr_li.length;i++){
        arr_li[i].className = 'none';      
    }
    arg.className = 'curTab';
    if(arg.className == 'curTab'){
        if (con == 'works_0') {
            startRequest('works_0');
        }else if(con == 'works_1'){
            startRequest('works_1');
        }else if(con == 'works_2'){
            startRequest('works_2');
        }  
    }  
}
window.onload = function(){
    startRequest('works_0');
}

xml文件：

works_0.xml

<?xml version="1.0" encoding="utf-8"?>
<root>
    <work>
        <userid>97026</userid>
        <foldID>3893</foldID>
        <workid>8379</workid>
    </work>
    <work>
        <userid>97026</userid>
        <foldID>3893</foldID>
        <workid>8378</workid>
    </work>
    <work>
        <userid>97026</userid>
        <foldID>3893</foldID>
        <workid>8374</workid>
    </work>
    <work>
        <userid>97026</userid>
        <foldID>3893</foldID>
        <workid>8369</workid>
    </work>
    <work>
        <userid>358611</userid>
        <foldID>14049</foldID>
        <workid>33964</workid>
    </work>
    <work>
        <userid>358611</userid>
        <foldID>14046</foldID>
        <workid>33960</workid>
    </work>
    <work>
        <userid>358611</userid>
        <foldID>14046</foldID>
        <workid>33959</workid>
    </work>
    <work>
        <userid>358542</userid>
        <foldID>14033</foldID>
        <workid>33951</workid>
    </work>   
</root>

works_1.xml

<?xml version="1.0" encoding="utf-8"?>
<root>
    <work>
        <userid>358457</userid>
        <foldID>14027</foldID>
        <workid>33946</workid>
    </work>
    <work>
        <userid>358413</userid>
        <foldID>14025</foldID>
        <workid>33936</workid>
    </work>
    <work>
        <userid>358413</userid>
        <foldID>14025</foldID>
        <workid>33935</workid>
    </work>
    <work>
        <userid>358413</userid>
        <foldID>14025</foldID>
        <workid>33934</workid>
    </work>
    <work>
        <userid>358458</userid>
        <foldID>14024</foldID>
        <workid>33931</workid>
    </work>
    <work>
        <userid>233263</userid>
        <foldID>8049</foldID>
        <workid>33927</workid>
    </work>
    <work>
        <userid>162003</userid>
        <foldID>14016</foldID>
        <workid>33925</workid>
    </work>
    <work>
        <userid>162003</userid>
        <foldID>14015</foldID>
        <workid>33919</workid>
    </work>
</root>

works_2.xml

<?xml version="1.0" encoding="utf-8"?>
<root>
    <work>
        <userid>358818</userid>
        <foldID>14082</foldID>
        <workid>34050</workid>
    </work>
    <work>
        <userid>358818</userid>
        <foldID>14082</foldID>
        <workid>34045</workid>
    </work>
    <work>
        <userid>196211</userid>
        <foldID>5503</foldID>
        <workid>11983</workid>
    </work>
    <work>
        <userid>92431</userid>
        <foldID>13756</foldID>
        <workid>33296</workid>
    </work>
    <work>
        <userid>358704</userid>
        <foldID>14089</foldID>
        <workid>34060</workid>
    </work>
    <work>
        <userid>359066</userid>
        <foldID>14094</foldID>
        <workid>34070</workid>
    </work>
    <work>
        <userid>358656</userid>
        <foldID>14061</foldID>
        <workid>33998</workid>
    </work>
    <work>
        <userid>359206</userid>
        <foldID>14104</foldID>
        <workid>34089</workid>
    </work>
</root>

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/liuyong0818/archive/2009/04/21/4098062.aspx

xiaocai06
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5如何实现标签切换效果图,基于jQuery实现多标签页切换的效果(web前端开发)...
weixin_29184075的博客
06-04 856
这里，实现多标签页效果的方法有两个，一个是基于DOM的，另一个是基于jquery的，此次我写的是一个对于一个电话套餐的不同，显示不同的标签页方法一：首先，我们要把页面的大体框架和样式写出来，html和css代码如下：10元套餐30元套餐50元包月10元套餐详情：每月套餐内拨打100分钟，超出部分2毛/分钟30元套餐详情：每月套餐内拨打300分钟，超出部分1.5毛/分钟50元包月详情：每月无限...
jQuery 实现tab切换效果
04-19
在本文中，我们将深入探讨如何使用JavaScript库jQuery来实现一种常见的网页交互功能——Tab切换效果。Tab切换是一种用户界面设计模式，它允许用户在多个视图之间切换，每个视图通常展示不同的内容区域。这种效果在...
数据请求html页面,模拟ajax请求数据并进行页面渲染
weixin_36011546的博客
06-04 747
通过ajax请求数据后，进行页面渲染。文件介绍1.goods.json，用于模拟后台接口数据{"cursor": 0,"size": 40,"page": 0,"result": [{"price": "1000","name": "小米手机","imgUrl": "img/1.png"},{"price": "2000","name": "华为手机","imgUrl": "img/1.png"}...
ajax中加html,Ajax中的load()方法实现指定区域加载或刷新html与jsp
weixin_36463292的博客
05-31 333
梳理知识方法的时候，笔者还是有数的，就不闲扯了。一、Jquery中的AjaxJquery对Ajax操作进行了封装，在Jquery中:最底层的是$.ajsx(),第二层是load()、$.get()、$.post()第三层是$.getJSON()二、load()方法(能载入远程html、jsp代码，插入到DOM中)load()方法是Jquery中最简单和常用的Ajax方法，能载入远程的html。它的...
纯php打造的tab选项卡效果代码(不用js)
10-28
用php实现的tab选项卡效果，根据get判断，获取get生成css与对应的内容，当然效率肯定没有静态的好，这里给出的思路与方法。
html通过Ajax异步交互实现分页
a347635191的博客
07-03 1606
模拟百度分页（前5后4） 定义一个页面的JavaBean，作为数据传输对象（DTO） public class PageBean<T> { private int totalCount; //总记录数 private int totalPage; //总页数 private int currentPage;//当前页码 private int pa...
jQuery+css实现tab切换效果
01-09
下面是一个基本的jQuery+CSS Tab切换效果实现步骤： 1. **HTML结构**：创建Tab按钮和对应的内容区。每个Tab按钮对应一个内容区，初始状态所有内容区应被隐藏，只有一个默认显示。 ```html <li><a href="#tab1...
有ajax，jquery实现tab效果
09-10
在网页设计中，Tab效果是一种常见的用户界面设计模式，它允许用户通过点击不同的标签来切换显示不同的内容区域。Ajax（Asynchronous JavaScript and XML）和jQuery是实现这种效果的常用技术。Ajax可以实现页面的异步...
ajax实现tab控件
05-25
通过以上步骤，我们可以实现一个基于Ajax的Tab控件，它能在用户切换Tab时异步加载新的内容，从而提高网页的响应速度和用户体验。在实际开发中，可能还需要根据项目需求进行调整和优化，比如添加加载指示器、错误处理...
jQuery左侧点击tab切换代码
06-24
在本文中，我们将深入探讨如何使用jQuery实现左侧点击tab切换效果。这个效果是网页设计中常见的一种交互方式，它能够使用户在多个内容区域之间轻松切换，提高用户体验。以下是对"jQuery左侧点击tab切换代码"的详细...
ajax标签(tab)内容切换
02-05
ajax标签(tab)内容切换! 很值得下载看看!资源免费,大家分享!!
ajax-tab(动态加载tab) 切换
07-04
ajax-tab(动态加载tab) 切换
html ajax分页,使用jQuery和Ajax请求实现分页效果
weixin_42613360的博客
06-20 163
在要求分页的程序中，我们一般会知道如下几个数据的参数：总记录数count每一页要显示的记录数：size当前页：num总页数我们可以通过count和size得到，在JS中可以使用Math.ceil()编写我们的JS分页脚本page.js//定义一个Page函数，接收两个参数，总记录数和参数列表varPage=function(count,params){this.size=10;//初...
原生 ajax 加载html页面,ajax加载html文件
weixin_31011587的博客
06-03 615
分析加载一个html的话是可以分为加载其中某个块(div)和加载整个页面，而不管加载其中任何一种都是需要本页面的一个块(div)来进行加载展示。加载的方法可以是$(ajax{}) 方法也可以是 $('#div').load() 方法，下面为大家演示一下实操index.htmlss1122$('#router').css('color','red');预期效果index.html (load方法和$...
html页面实现ajax进行下一页,ajax原理和实现步骤流程
weixin_42355294的博客
06-03 621
ajax怎么实例化。。。步骤详细点、、jquery怎么实JQuery提供Ajax实现，不需要自己去创建XMLHttpRequest对象。使用JQuery进行Ajax调用的方式很多，可以在网上查或者直接看参考手册。最常用的方式是： $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", succes...
php 实现tab切换_纯php打造的tab选项卡效果代码(不用js)
weixin_36108931的博客
03-09 168
1.根据get判断，获取get生成cssif(!isset($_GET['city_id'])){$city_id = 12;}else{$city_id = $_GET['city_id'];}echo '.a'.$city_id.'{color:red;}';for($i=12;$i<=16;$i++){if($i != $city_id){if ($i != 12 ){echo '.l...
ajax只能调用一次解决办法
qq_39869537的博客
05-22 2562
前段时间遇到了一个问题，如果datatable对于同一个ajax调取第二次时没反应，查了很多网站发现在datatable的属性中加上"rn":Math.floor(Math.random()*100+1)
html tab标签切换
lengxin337的专栏
08-22 2039
商品信息 描述 营销选项 $(function() { //tab标签切换 function select_tab(curr_tab) { $("form[name='goodsForm'] > div").hide(); $("#table_box_"+curr_tab).show();
简易tab切换
weixin_43868799的博客
03-03 230
let tab = function (bar, pane) { if (typeof (bar) !== "string" || typeof (pane) !== "string") { console.log('请传入字符串类型') } else { this.bar = bar this.pane = pane let lis = documen...
jquery，ajax写一个tab切换的简单分页
最新发布
07-15
可以使用jQuery和Ajax来实现一个简单的分页tab切换效果。以下是一个示例代码： HTML部分： ```html <ul class="tab-nav"> <li><a href="#" data-page="1">Tab 1</a></li> <li><a href="#" data-page="2">Tab 2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值