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
  <script type="text/javascript">

      <div id="tabs">
                        <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>
                  <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>

How can I do it, can you please help? Thanks in advance!
Who is Participating?
Shahzad Fateh AliWeb Solutions Architect & Technical Project Manager- VentureDive (Pvt) LtdCommented:

You can do it by fetching the pages via ajax. Read this
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.
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")) {
                    } else {

Open in new window

elrenacentistaAuthor Commented:
hi experts,

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

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.