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???

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???

• php
• javascript
• tabs

• 1 What have you tried? Giving you code for this would be nearly impossible without an enormous amount of additional information. – Mike B Commented Nov 4, 2009 at 4:31
• From looking at your question and your subsequent ments, I get the impression you're suffering from a mon misconception about how PHP and javascript interact (i.e. they don't). Once a page is displayed, PHP has done all of its work. The only way to change what is displayed with PHP is to make a NEW HTTP request to the server (i.e. request a URL). Javascript (using AJAX) allows you to make that request unseen and update the page with the new information but personally I'd go with one of the CSS/javascript options you've been given below and simply show/hide each bit generated by PHP. – MalphasWats Commented Nov 4, 2009 at 15:38

4 Answers 4

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./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.

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 remended) 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

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>

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 puted 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.