CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Souza
Souza

Reputation: 1143

Create tabs with jquery

So, i'm a bit clueless on this one, i would like to know the best way of creating two tabs on this page ("braga" and "lisboa" being the 2 tabs):

http://www.iloja.pt/index.php?_a=viewDoc&docId=14

I would just hide the content from the first tab, when selecting the second tab, showing up the hidden content with a show() and changing the css properties of the buttons, but i don't think this is the practical way of doing it.

Please, could you point me on the right direction?

Thanks very much guys!

Upvotes: 0

Views: 1199

Answers (3)

Deepakmahajan
Deepakmahajan

Reputation: 866

use jquery-ui-1.8.1.custom.min.js for the tab 

   <div id="tabs" style="height: auto;">
  <ul>
            <li><a href="#subtabs-1" onclick="GetTab1();return false;">Tab1</a></li>
            <li><a href="#subtabs-2" onclick="GetTab2();return false;">Tab2</a></li>

        </ul>
 <div id="subtabs-1" style="height: auto; overflow: hidden;">
</div>
<div id="subtabs-2" style="height: auto; overflow: hidden;">
</div>


 $(document).ready(function () {
                      $("#tabs").tabs();
            $("#tabs").tabs({ selected: '<%=Model.SelectedTab %>' });
    });

 Note: onclick fill the html in the tabs

Upvotes: 0

Java
Java

Reputation: 2489

As a example we can do in this way.

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>



<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">braga</a></li>
        <li><a href="#tabs-2">lisboa</a></li>

    </ul>
    <div id="tabs-1">
        <p>braga</p>
    </div>
    <div id="tabs-2">
        <p>lisboa</p>
    </div>

</div>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>Click tabs to swap between content that is broken into logical sections.</p>
</div><!-- End demo-description -->

Upvotes: 0

Snake Eyes
Snake Eyes

Reputation: 16754

Do you mean http://jqueryui.com/demos/tabs/ ?

This does exactly as you described above. There are many options to do. Read documentation also.

Upvotes: 1

Related Questions