PHP - PHPtabs or javascript tabs used in php - Asked By waseem kaleem on 16-Jan-12 11:33 AM

Can any one knos how We create Asp.Net MultiView Controler like tabs in php or javascript 
kalpana aparnathi replied to waseem kaleem on 16-Jan-12 12:03 PM
[)ia6l0 iii replied to waseem kaleem on 16-Jan-12 12:04 PM
Oh. That should be easy. 

I have attached a sample that I found over web couple of years ago. Please make sure you add the attribution to the source (You may find the details inside the attachment)
Add the stylesheet:
<link rel="stylesheet" type="text/css" href="tab-view.css" />

Add the tab div - the main placeholder.
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 452px;">
  <a <?=($id == 1) ? 'class="Current"' : 'href="sample.php?id=1"';?>>Tab 1</a>
  <a <?=($id == 2) ? 'class="Current"' : 'href="sample.php?id=2"';?>>Tab 2</a>
  <a <?=($id == 3) ? 'class="Current"' : 'href="sample.php?id=3"';?>>Tab 3</a>

Add the individual pages.
<div class="Pages" style="width: 450px; height: 300px;">
  <div class="Page" style="display: <?=($id == 1) ? 'block' : 'none';?>"><div class="Pad">Page 1</div></div>
  <div class="Page" style="display: <?=($id == 2) ? 'block' : 'none';?>"><div class="Pad">Page 2</div></div>
  <div class="Page" style="display: <?=($id == 3) ? 'block' : 'none';?>"><div class="Pad">Page 3</div></div>

And finally call the initialize method of the tabview script and pass the parent placeholder.

Here is the source: php
waseem kaleem replied to [)ia6l0 iii on 16-Jan-12 12:10 PM
Thank you.Can you provide any more tab script which can be closed?
[)ia6l0 iii replied to waseem kaleem on 16-Jan-12 12:21 PM
What do you mean by "closed"?

I just checked the sample that I attached and it looked complete.

waseem kaleem replied to [)ia6l0 iii on 16-Jan-12 12:28 PM
I mean  there is a close button or link to close tab.for example suppose it is  a tab "tab 1 x" when I press "x" tab 1 is closed.
Thank you for fast replies  
[)ia6l0 iii replied to waseem kaleem on 16-Jan-12 12:38 PM
Add a script tag in the page, and add code to remove the tab from its parent container. Code below:

<script type="text/javascript">
    function removeMe(ctrl) {
        var tabContainer = document.getElementById('tabContainer');
        var tab = document.getElementById(ctrl);

In the tabcontainer, give an id like below: and add the x mark. See the modified code below: pass the anchor tag as the parameter to the javascript function added in the above statement. 

<div class="Tabs" style="width: 452px;" id="tabContainer">
  <a id="firstlink" class="Current">Tab 1 &nbsp;&nbsp;<span onclick="removeMe('firstlink');">x</span></a>
  <a id="secondlink">Tab 2<span></span>&nbsp;&nbsp;<span onclick="removeMe('secondlink);">x</span></a>
  <a id="thirdlink" >Tab 3&nbsp;&nbsp;<span onclick="removeMe('thirdlink');">x</span></a>

That should do. 

Jitendra Faye replied to waseem kaleem on 16-Jan-12 11:55 PM

You can use Jquery Tabs.

After adding jquery ui plugin you can use jquery tab like this-



$(function () {






div id="tabs">


<li><a href="#tabs-1">Nunc tincidunt</a></li>

<li><a href="#tabs-2">Proin dolor</a></li>

<li><a href="#tabs-3">Aenean lacinia</a></li>


<div id="tabs-1">

<p>Tab 1</p>


<div id="tabs-2">

<p> Tab 2</p>


<div id="tabs-3">

<p>Tab 3</p>




For more example follow this also-

Riley K replied to waseem kaleem on 16-Jan-12 11:57 PM

I suggest you go with jQuery tabs

    // get tab id and tab url
    tabId = $(this).attr("id");
    tabUrl = jQuery("#"+tabId).attr("href");
    // load tab content
    return false;

Refer this for step by step tutorial and demo