Jquery tools tabs customization

Question

i want to do same like it.

we can do tabs easily through jquery(http://flowplayer.org/tools/demos/tabs/skins.html) but i don't know how to display default content on tab content place.pls look image it will show what i want exactly.

please any one help and give idea to do.

Answer 1

I've created a fiddle here: http://jsfiddle.net/garreh/cfmvE/

Should get you started in the right direction. If you want to use jQuery UI tabs, take a look at the million examples around the internet. However, what your trying to do is very simple and can be achieved easily with the attached fiddle. It's very easy to add ajax into the code.

<div id="tab_container">
    <div class="tab_content tab_1 tab_active">
        What's your name?<br/><br/>
        <input type="text"/>
    </div>
    <div class="tab_content tab_2">
        Some other question
    </div>
    <div class="tab_content tab_3">
        A final question blah
    </div>        
</div>

<div id="tabs">
    <a href="#" tab="1">Question 1</a>
    <a href="#" tab="2">Question 2</a>
    <a href="#" tab="3">Question 3</a>
</div>

jQuery:

$('#tabs > a').click(function() {
    var $tab = $('.tab_' + $(this).attr('tab'));
    if ($tab.length)
    {
        // Hide active tab & selected style:
        $('.tab_active').removeClass('tab_active');
        $('#tabs .active').removeClass('active');

        // Show clicked tab content
        $tab.addClass('tab_active');

        // Set tab styling
        $(this).addClass('active');
    }
});

CSS available on the fiddle.

---

Edit:

Here's another fiddle demonstrating tabs using just HTML using the hyperlink anchor trick. Javascript not required: http://jsfiddle.net/garreh/6e2w5/