Using jQuery UI for only jQuery Tab system is bad idea because it will eat network bandwidth. If you are not going to use jQuery UI for creating tabs then you can make use of this.
As shown in above picture, The Tab system contains 2 main parts
1. Tab display control buttons
2. Tab Containers
1. Tab display control buttons
2. Tab Containers
How it Works
If user clicks on Tab 1 then the code will hide container class elements and open up the container 1 ( 1st element of class container )
It will check index of Tab button and it will open same index container element.
Markup
<div id="tabsDiv"> <ul id="tabs"> <li>tab1</li> <li>tab2</li> <li>tab3</li> </ul> <hr /> <div class="container"> <br /> Container 1<br /> <br /> Content Here<br> <br /> </div> <div class="container"> <br /> Container 2<br /> <br /> Content Here<br> <br /> </div> <div class="container"> <br /> Container 3<br /> <br /> Content Here<br> <br /> </div> </div>
CSS
#tabsDiv #tabs li { display:inline; padding:10px; background-color:#fafafa; border:1px solid #ccc; cursor:pointer; color:#777; } #tabsDiv #tabs li.selected { border-bottom:1px solid #fff; background-color:#fff; color:#222; } #tabsDiv { position:relative; height:auto; border:1px solid #fff; } #tabsDiv #tabs { top:0px; left:0px; position:absolute; padding-left:0px; } #tabsDiv hr { top:36px; border:0px; border-bottom:1px solid #ddd; position:absolute; width:100%; z-index:0; } #tabsDiv #tabs { top:0px; position:absolute; z-index:5; } #tabsDiv .container { margin-top:46px; padding:10px; display:none; border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; }
jQuery
$(function() { $("#tabsDiv #tabs li").click(function() { $("#tabsDiv #tabs li").removeClass("selected"); $(this).toggleClass("selected"); var n = $("#tabsDiv #tabs li.selected").index(); var obj = $("#tabsDiv .container:eq( " + n + " )"); $("#tabsDiv .container").hide(); $(obj).show(); }); $("#tabsDiv #tabs li:first").click(); });
great
ReplyDeleteHi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.
ReplyDeleteNice blog information thanks for sharing .I am really impressed with your information
ReplyDeleteคาสิโนออนไลน์ที่น่าเชื่อถือและมีความเป็นมืออาชีพที่สุดในตอนนี้
โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
เพียงแค่คุณสมัคร สล็อตออนไลน์ กับทางทีมงานของเราเพียงเท่านั้น
ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
สมัครสล็อตออนไลน์ >>> Goldenslot
สนใจร่วมสนุกกับ คาสิโนออนไลน์ คลิ๊กได้เลย
มีทั้งคาสิโนออนไลน์ หวยออนไลน์ ฟุตบอลออนไลน์ สล็อตออนไลน์ และอื่นๆอีกมากมาย