Ajax wordpress标签

Question

I was looking for tabs with loading content and refresh page after clicking in the tabs button I have found this code in webdeveloper.com by Mitya it works fine out WordPress but when I put it in my custom theme file it didn't work I don't know why

Question: how I can make it work with WordPress ?

Here is the code

   
<!--Tabs Area -->
<script type="text/javascript">

function startAjax() { //appropriate to browser being used
    var xmlHttpObj;
    if (window.XMLHttpRequest)
    xmlHttpObj = new XMLHttpRequest();
    else {
        try { xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP"); }
        catch (e) {
            try { xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP"); }
            catch (e) { xmlHttpObj = false; }
        }
    }
    return xmlHttpObj;
}
gateway = startAjax();

function getTabContent(tabNum, afterAjaxResponse) {
    if (!afterAjaxResponse) {
        if (!gateway) {
            alert('Your browser does not support XMLHTTP');
            return;
        } else {
            gateway.open('GET', 'getTabContent.php?tabNum='+tabNum, true);
            gateway.onreadystatechange = function() { getTabContent(null, true); }
            gateway.send(null);
        }
    } else if (gateway.readyState == 4 && gateway.status == 200) {
        document.getElementById('tabsUnder').innerHTML = gateway.responseText;
    }
}

window.onload = function() {
    
    getTabContent(1);
    
    var tabsHouser = document.getElementById('tabs');
    var tabs = tabsHouser.getElementsByTagName('li');
    tabsHouser.onclick = function(e) {
        var clickedElement = e ? e.target : window.event.srcElement;
        if (clickedElement.id.match(/^tab\d{1}$/)) {
            var clickedTabNum = clickedElement.id.substr(clickedElement.id.length-1, 1);
            for(var k=0; k<tabs.length; k++) tabs[k].className = '';
            clickedElement.className = 'on';
            getTabContent(clickedTabNum);
        }
    }
    
}

</script>

<ul id="tabs">
    <li class='on' id='tab1'>tab1</li>
    <li id='tab2'>tab2</li>
    <li id='tab3'>tab3</li>
    <li id='tab4'>tab4</li>
    <li id='tab5'>tab5</li>
</ul>
<div id="tabsUnder"></div>
              <?php get_template_part( 'getTabContent' ); ?>                      
<!--End Tabs Content Area-->

getTabContent.php code :

<?php
if(isset($_GET['tabNum'])) {
    switch($_GET['tabNum']) {
    case 1: echo "this is the content for the <b>first</b> tab"; break;
    case 2: echo "this is the content for the <b>second</b> tab"; break;
    case 3: echo "this is the content for the <b>third</b> tab"; break;
    case 4: echo "this is the content for the <b>fourth</b> tab"; break;
    case 5: echo "this is the content for the <b>fifth</b> tab"; break;
}
}

?>

</div>

Answer 1

You can create a plugin in wordpress and can generate shortcode wherever you want to place it. For ajax either you can use the wordpress built-in admin ajax or you can develop your own ajax and can place it inside your plugin.