How to show html pages when a jquery tab is selected?

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!
elrenacentistaAsked:
Who is Participating?
 
Shahzad Fateh AliWeb Solutions Architect & Technical Project Manager- VentureDive (Pvt) LtdCommented:
Hi,

You can do it by fetching the pages via ajax. Read this http://jqueryui.com/demos/tabs/#ajax
0
 
ZadoCommented:
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
tabs.js
jquery.js
0
 
baretreeCommented:
you can try your own here but the basic is something like
<script type="text/javascript">
            $(document).ready(function() {
                $("#tabs").click(function() {
                    if ($("#tabs-1").is(":visible")) {
                        $("#tabs-1").hide();
                    } else {
                        $("#tabs-1").show();
                    }
                });
            });
        </script>

Open in new window

0
 
elrenacentistaAuthor Commented:
hi experts,

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

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.