-
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”
Leave a Reply
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.