• How to show tabs with JQuery



    Question: How to show tabs with JQuery?

    Answer: you can use following steps for this:

    Step 1: Create a UL LI based tabs listing Step 2: Create Div based HTML for each tab. Step 3: Assign 1 class to all divs and unique Ids to each div. Step 4: Write CSS for tabs and divs Step 5: Write JQuery code for manipulation

    Example:

    HTML

    <p id="mak_content_nav"> <ul> <li class="active"><a href="" divID="mak_div_1">Tab 1</a></li> <li><a href="" divID="mak_div_2">Tab 2</a></li> <li><a href="" divID="mak_div_3">Tab 3</a></li> </ul> </p> <br clear="all"> <p id="mak_div_1" class="tab-contents"> Contents for tab 1. </p> <p id="mak_div_2" class="tab-contents"> Contents for tab 2. </p> <p id="mak_div_3" class="tab-contents"> Contents for tab 3. </p> CSS <style> #mak_content_nav ul li{ width: 100px; float:left; border:1px solid #666; text-align:center; color:#000; } #mak_content_nav ul li a{ text-decoration:none; color:#000; } .tab-contents{ display: none; border:1px solid #666; border-top:none; width:304px; margin-left:40px; } .active{ border-bottom:none !important; } </style> JQuery <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script> function makTabs() { $('.tab-contents').hide(); $('#mak_div_1').show(); $('#mak_content_nav li a').click(function() { $('.tab-contents').hide(); var link = $(this).attr('divID'); $("#"+link).show(); $('#mak_content_nav li').removeClass('active'); $(this).parent().addClass('active'); return false; }); } $(document).ready(function() { makTabs(); }); </script>

    Demo:


  • One thought on “How to show tabs with JQuery

    1. Hi, I am using ajax with wordpress for first time. I have a jquery ui tabs, in each tabs i will show differents types of post so i have to run a query_post via ajax. But the functions are shown undefined.

      Reply

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>