Clicky

I am starting using Jquery and I need some help with tabs. I need to create 4 tabs that will show 4 different html pages. For example,  tab 1 will show  page1.html   tab 2 will show page2.html, etc. I am using jsp also.

I have
 
<head>
  <script type="text/javascript">
                  $(function(){
                        $('#tabs').tabs();
                  });
            </script>
<head>

<body>
      <div id="tabs">
                  <ul>
                        <li><a href="#tabs-1">tab1</a></li>
                        <li><a href="#tabs-2">tab2l</a></li>
                        <li><a href="#tabs-3">tab3</a></li>
                        <li><a href="#tabs-4">tab4</a></li>
                        
                  </ul>
                  <div id="tabs-1"> want to show page1.html  </div>
                  <div id="tabs-2"> want to show page2.html   </div>
                  <div id="tabs-3"> want to show page3.html   </div>
                  <div id="tabs-4">  want to show page4.html   </div>
                  <div id="tabs-5">  want to show page5.html  </div>
            </div>
</body>

How can I do it, can you please help? Thanks in advance!

asked 12/09/2011 02:14

elrenacentista's gravatar image

elrenacentista ♦♦


4 Answers:
Hi,

You can do it by fetching the pages via ajax. Read this http://jqueryui.com/demos/tabs/#ajax
link

answered

shahzadfatehali's gravatar image

shahzadfatehali

Here you have very easy to understand code for what you need (files attached). I use it as my template every time I need it.
index.html
  • 919 bytes
  • main page
index.html

tabs.js
  • 683 bytes
  • js code
tabs.js

jquery.js
  • 70 KB
  • jquery library
jquery.js
    link

    answered 2011-12-09 at 12:33:21

    Zado's gravatar image

    Zado

    you can try your own here but the basic is something like
    1:
    2:
    3:
    4:
    5:
    6:
    7:
    8:
    9:
    10:
    11:
    <script type="text/javascript">
                $(document).ready(function() {
                    $("#tabs").click(function() {
                        if ($("#tabs-1").is(":visible")) {
                            $("#tabs-1").hide();
                        } else {
                            $("#tabs-1").show();
                        }
                    });
                });
            </script>
    link

    answered 2011-12-09 at 12:52:00

    baretree's gravatar image

    baretree

    hi experts,

     thanks for your help I used the link  shahzadfatehali shared and it worked as I wanted. Thanks

    link

    answered 2011-12-09 at 15:01:30

    elrenacentista's gravatar image

    elrenacentista

    Your answer
    [hide preview]

    Follow this question

    By Email:

    Once you sign in you will be able to subscribe for any updates here

    By RSS:

    Answers

    Answers and Comments

    Tags:

    ×1
    ×104
    ×63
    ×14
    ×1

    Asked: 12/09/2011 02:14

    Seen: 225 times

    Last updated: 12/12/2011 06:30