Tabbing in PHP?

Question

i have these kind of tabs on my page

Equ | Tax | Balanced | Debt | Funds | ETF | Gilt .......

and then there's space below these tabs. When user clicks on these tabs then a data corresponding to these tabs has to be displayed in that space without changing the url of the page.Like when i click Equ then its data will be displayed in that space ,if i click tax then its data will be displayed in that same space as if it has overwritten the previous data.The data that has to e shown is calculated using php. Now what is the easiest way to do so using php or javascript ???

some coding help would be appreciated here .

EDIT: see i know this can be done using javascript but the data that has to be shown is in php variable .Now how to assign a php variable to javascript????

<script type="text/javascript">
function showhide(ref)
{
    document.getElementById('mf').innerHTML= HERE I WANT A PHP VARIABLE;
}
</script>

how can i send my pfp variables in onclick event so that they can be used in the function???

Answer 1

You may use CSS or/and Javascript to help you do the trick.

Example of tabs using CSS only:

http://edeverett.co.uk/experiments/css_only_tabs.html

Example of tabs using Javascript:

http://jqueryui.com/demos/tabs/

Edit As reply to your edit:

EDIT: see i know this can be done using javascript but the data that has to be shown is in php variable .Now how to assign a php variable to javascript????

To perform everything on server-side synchronously, you can inject calculated result into your javascript:

function showhide(ref)
{
    document.getElementById('mf').innerHTML= '<?php echo $variable; ?>';
}

A better practise would be to use AJAX.

Answer 2

You have to use ajax

You can use some libraries like xajax, mootools or jquery.

Upd: Example with mootools: first create separate php file, that returns text acording to tab(createContent.php) then in javascript:

function menuClick(var i)
{
    var request1 = new Request.HTML({ url: 'createContent.php?i='+i,
        onSuccess: function(html) {
            $('div1').set('text', '');
            $('div1').adopt(html);
            $('div1').innerHTML = '';
        },
        onFailure: function() {
            $('div1').set('text', '');
            $('div1').innerHTML = '';
        }
    });

    request1.send();
    return false;
}

in html add onclick for tabs with that function:

<a href="#" onclick="return menuClick(1);">EQU</a>

Answer 3

Display behaviour would be a client-side thing, since it is something (some logic) that happens on the browser. As previously stated you would have to use javascript/css to do it.

In terms of coding help, you might find this helpful: http://stilbuero.de/jquery/tabs_3/

EDIT

So, if you want to put a php variable there, this is what you do and make this a ".php" page:

<script type="text/javascript">
function showhide(ref)
{
    document.getElementById('mf').innerHTML= <?php echo $VAR ?>;
}
</script>

Of course this assumes that you have the variable computed before rendering the page. If the variable's value depends on some action on the page (for e.g., after entering some text in a textbox and a button is clicked - like a search box), you would have to use AJAX for that. You would do that by doing a GET request of POST request to a php page and then display the content from that page. The link I posted above has an example for AJAX tabs, you could take a look at that.

Answer 4

It's actually pretty easy. You dont need to load the data dynamically on the tab clicks. you can load the data all at once when the page loads then just show/hide as needed.

an easy example...

<ul id="#nav">
<li><a href="#" id="equ-tab">equ</a></li>
<li><a href="#" id="tax-tab">tax</a></li>
<li><a href="#" id="bal-tab">balanced</a></li>
</ul>

<div id="content">
    <div id="content-equ">equ content</div>
    <div id="content-tax">tax content</div>
    <div id="content-bal">balanced content</div>
</div>

let's say equ is the default content. when the page loads hide all other divs besides equ (using css or preferably javascript)

using javascript (jquery recommended) when a tab is clicked hide all content and then show that tabs content.

$('#nav a').click(function(){ // when a nav link is clicked
    $('#content div').hide(); // hide all content
    $('#content #content-'+$(this).attr('id')).show(); // show content that has id #content-<tabID>
});

code isn't meant ot be copy and pasted, i typed it out quickly as an example