Tabbing In Php?

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

Solution 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= '<?phpecho$variable; ?>';
}

A better practise would be to use AJAX.

Solution 2:

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

<ulid="#nav"><li><ahref="#"id="equ-tab">equ</a></li><li><ahref="#"id="tax-tab">tax</a></li><li><ahref="#"id="bal-tab">balanced</a></li></ul><divid="content"><divid="content-equ">equ content</div><divid="content-tax">tax content</div><divid="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

Solution 3:

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:

functionmenuClick(var i)
{
    var request1 = newRequest.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();
    returnfalse;
}

in html add onclick for tabs with that function:

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

Solution 4:

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:

<scripttype="text/javascript">functionshowhide(ref)
{
    document.getElementById('mf').innerHTML= <?phpecho$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.