Tabs are used to create multiple sections on a webpage that can be swapped, much like an accordion. It helps to group content and to view content from a specific group at a time.
Tabs are created by following a specific markup which is as follows:
- Tabs should be enclosed inside an ordered list or an unordered list
- Each tab heading should be wrapped individually in a list item and an anchored tag enclosed with an href attribute specifying the content for each tab panel
- Each tab panel can be empty but it should have its own id corresponding to the hashed name entered in the anchor element of the associated tab.
The contents inside a tab panel can be defined on the same page or can be loaded through Ajax, both of them are handled by the href attribute associated with the anchor tag of that panel.
Below we write a code for a simple 4-panel tab using jquery UI.
The tabs are specified in a div tag with an id. The id of which is specified inside the jquery code. Here we have chosen the 2nd tab as the default tab which will be chosen when the webpage opens. You can change it by specifying a different value in the active option.
Note: The tabs are indexed starting from “0”.
Below examples illustrates the jQuery Tabs:
Example 1: This example code is a simple jquery tab, all the tabs are assessable.
- Program:
<html><head><linkhref=rel='stylesheet'></head><style>b{float: right;margin: 7px;color: lime;}#neveropen a:hover{color: lime;background: gray;}</style><body><br><br><divid="neveropen"><ul><li><ahref="#Algorithms">Algorithms</a></li><li><ahref="#Data_Structure">Data Structure</a></li><li><ahref="#Practice">Practice</a></li><li><ahref="#interview">interview</a></li><b>neveropen</b></ul><divid='Algorithms'><p>The answer to this is simple, we can have all theabove things only if we have performance. Soperformance is like currency through which we canbuy all the above things. Another reasonfor studying performance is – speed is fun!</p></div><divid='Data_Structure'><p>For example, let us say, we want to store marks ofall students in a class, we can use an array to storethem. This helps in reducing the use of number ofvariables as we don’t need to create a separatevariable for marks of every subject. All marks canbe accessed by simply traversing the array.</p></div><divid='Practice'><p>Asymptotic Analysis is the big idea that handlesabove issues in analyzing algorithms. In AsymptoticAnalysis, we evaluate the performance of an algorithmin terms of input size (we don’t measure the actualrunning time). We calculate, how does the time(or space) taken by an algorithm increases withthe input size.</p></div><divid='interview'><p>Also, in Asymptotic analysis, we always talk aboutinput sizes larger than a constant value. It mightbe possible that those large inputs are never givento your software and an algorithm which isasymptotically slower, always performs better foryour particular situation. So, you may end up choosingan algorithm that is Asymptotically slower but fasterfor your software.</p></div></div><scriptsrc=</script><scriptsrc=</script><script>$(document).ready(function() {$("#neveropen").tabs({active: 0})})</script></body></html> - Output:
Example 2: Keeping all tabs closed by default, you can also choose to keep all the tabs closed by default. To do this we use the Collapsible option and set its value to “True” and set the value of active option to false.
- Program:
<html><head><linkhref=rel='stylesheet'></head><style>b{float: right;margin: 7px;color: lime;}#neveropen a:hover{color: lime;background: gray;}</style><body><br><br><divid="neveropen"><ul><li><ahref="#Algorithms">Algorithms</a></li><li><ahref="#Data_Structure">Data Structure</a></li><li><ahref="#Practice">Practice</a></li><li><ahref="#interview">interview</a></li><b>neveropen</b></ul><divid='Algorithms'><p>The answer to this is simple, we can have all theabove things only if we have performance. Soperformance is like currency through which we canbuy all the above things. Another reasonfor studying performance is – speed is fun!</p></div><divid='Data_Structure'><p>For example, let us say, we want to store marks ofall students in a class, we can use an array to storethem. This helps in reducing the use of number ofvariables as we don’t need to create a separatevariable for marks of every subject. All marks canbe accessed by simply traversing the array.</p></div><divid='Practice'><p>Asymptotic Analysis is the big idea that handlesabove issues in analyzing algorithms. In AsymptoticAnalysis, we evaluate the performance of an algorithmin terms of input size (we don’t measure the actualrunning time). We calculate, how does the time(or space) taken by an algorithm increases withthe input size.</p></div><divid='interview'><p>Also, in Asymptotic analysis, we always talk aboutinput sizes larger than a constant value. It mightbe possible that those large inputs are never givento your software and an algorithm which isasymptotically slower, always performs better foryour particular situation. So, you may end up choosingan algorithm that is Asymptotically slower but fasterfor your software.</p></div></div><scriptsrc=</script><scriptsrc=</script><script>$(document).ready(function() {$("#neveropen").tabs({active: false,collapsible: true})})</script></body></html> - Output:
Example 3: In this example we will disable the tabs. We can choose to disable specific tabs or all the tabs by using the disable option. First, we disable all the tabs for which we set the value “True” for the disable option.
- Program:
<html><head><linkhref=rel='stylesheet'></head><style>b{float: right;margin: 7px;color: lime;}#neveropen a:hover{color: lime;background: gray;}</style><body><br><br><divid="neveropen"><ul><li><ahref="#Algorithms">Algorithms</a></li><li><ahref="#Data_Structure">Data Structure</a></li><li><ahref="#Practice">Practice</a></li><li><ahref="#interview">interview</a></li><b>neveropen</b></ul><divid='Algorithms'><p>The answer to this is simple, we can have all theabove things only if we have performance. Soperformance is like currency through which we canbuy all the above things. Another reasonfor studying performance is – speed is fun!</p></div><divid='Data_Structure'><p>For example, let us say, we want to store marks ofall students in a class, we can use an array to storethem. This helps in reducing the use of number ofvariables as we don’t need to create a separatevariable for marks of every subject. All marks canbe accessed by simply traversing the array.</p></div><divid='Practice'><p>Asymptotic Analysis is the big idea that handlesabove issues in analyzing algorithms. In AsymptoticAnalysis, we evaluate the performance of an algorithmin terms of input size (we don’t measure the actualrunning time). We calculate, how does the time(or space) taken by an algorithm increases withthe input size.</p></div><divid='interview'><p>Also, in Asymptotic analysis, we always talk aboutinput sizes larger than a constant value. It mightbe possible that those large inputs are never givento your software and an algorithm which isasymptotically slower, always performs better foryour particular situation. So, you may end up choosingan algorithm that is Asymptotically slower but fasterfor your software.</p></div></div><scriptsrc=</script><scriptsrc=</script><script>$(document).ready(function() {$( "#neveropen" ).tabs({disabled:true})})</script></body></html> - Output:
Example 4: In this example we will disable some specific tabs. In the below code we disable the 1st and 3rd tab(0 nd 2nd in terms on indexing):
- Program:
<html><head><linkhref=rel='stylesheet'></head><style>b{float: right;margin: 7px;color: lime;}#neveropen a:hover{color: lime;background: gray;}</style><body><br><br><divid="neveropen"><ul><li><ahref="#Algorithms">Algorithms</a></li><li><ahref="#Data_Structure">Data Structure</a></li><li><ahref="#Practice">Practice</a></li><li><ahref="#interview">interview</a></li><b>neveropen</b></ul><divid='Algorithms'><p>The answer to this is simple, we can have all theabove things only if we have performance. Soperformance is like currency through which we canbuy all the above things. Another reasonfor studying performance is – speed is fun!</p></div><divid='Data_Structure'><p>For example, let us say, we want to store marks ofall students in a class, we can use an array to storethem. This helps in reducing the use of number ofvariables as we don’t need to create a separatevariable for marks of every subject. All marks canbe accessed by simply traversing the array.</p></div><divid='Practice'><p>Asymptotic Analysis is the big idea that handlesabove issues in analyzing algorithms. In AsymptoticAnalysis, we evaluate the performance of an algorithmin terms of input size (we don’t measure the actualrunning time). We calculate, how does the time(or space) taken by an algorithm increases withthe input size.</p></div><divid='interview'><p>Also, in Asymptotic analysis, we always talk aboutinput sizes larger than a constant value. It mightbe possible that those large inputs are never givento your software and an algorithm which isasymptotically slower, always performs better foryour particular situation. So, you may end up choosingan algorithm that is Asymptotically slower but fasterfor your software.</p></div></div><scriptsrc=</script><scriptsrc=</script><script>$(document).ready(function() {$( "#neveropen" ).tabs({active: 1,disabled:[0, 2]})})</script></body></html> - Output:
Example 5: We can choose which element to open by default, also by default mouse click event opens the tab, also we will change this to Mouse-hover to open or active that tab
- Program:
<html><head><linkhref=rel='stylesheet'></head><style>b{float: right;margin: 7px;color: lime;}#neveropen a:hover{color: lime;background: gray;}</style><body><br><br><divid="neveropen"><ul><li><ahref="#Algorithms">Algorithms</a></li><li><ahref="#Data_Structure">Data Structure</a></li><li><ahref="#Practice">Practice</a></li><li><ahref="#interview">interview</a></li><b>neveropen</b></ul><divid='Algorithms'><p>The answer to this is simple, we can have all theabove things only if we have performance. Soperformance is like currency through which we canbuy all the above things. Another reasonfor studying performance is – speed is fun!</p></div><divid='Data_Structure'><p>For example, let us say, we want to store marks ofall students in a class, we can use an array to storethem. This helps in reducing the use of number ofvariables as we don’t need to create a separatevariable for marks of every subject. All marks canbe accessed by simply traversing the array.</p></div><divid='Practice'><p>Asymptotic Analysis is the big idea that handlesabove issues in analyzing algorithms. In AsymptoticAnalysis, we evaluate the performance of an algorithmin terms of input size (we don’t measure the actualrunning time). We calculate, how does the time(or space) taken by an algorithm increases withthe input size.</p></div><divid='interview'><p>Also, in Asymptotic analysis, we always talk aboutinput sizes larger than a constant value. It mightbe possible that those large inputs are never givento your software and an algorithm which isasymptotically slower, always performs better foryour particular situation. So, you may end up choosingan algorithm that is Asymptotically slower but fasterfor your software.</p></div></div><scriptsrc=</script><scriptsrc=</script><script>$(document).ready(function() {$( "#neveropen" ).tabs({event:'mouseover'})})</script></body></html> - Output:
Example 6: In this example we will change the tab page height depending on the content of that tab. To do that we will be required to define the min-height as short as you can define. And the overflow property that will increase the height of the tab page depending on the content.
-
Program:
-
<html><head><linkhref=rel='stylesheet'></head><style>b{float: right;margin: 7px;color: lime;}#neveropen a:hover{color: lime;background: gray;}</style><body><br><br><divid="neveropen"><ul><li><ahref="#Algorithms">Algorithms</a></li><li><ahref="#Data_Structure">Data Structure</a></li><li><ahref="#Practice">Practice</a></li><li><ahref="#interview">interview</a></li><b>neveropen</b></ul><divid='Algorithms'><p>The answer to this is simple, we can have all theabove things only if we have performance. Soperformance is like currency through which we canbuy all the above things. Another reasonfor studying performance is – speed is fun!</p></div><divid='Data_Structure'><p>For example, let us say, we want to store marks ofall students in a class, we can use an array to storethem. This helps in reducing the use of number ofvariables as we don’t need to create a separatevariable for marks of every subject. All marks canbe accessed by simply traversing the array.</p></div><divid='Practice'><p>Asymptotic Analysis is the big idea that handlesabove issues in analyzing algorithms. In AsymptoticAnalysis, we evaluate the performance of an algorithmin terms of input size (we don’t measure the actualrunning time). We calculate, how does the time(or space) taken by an algorithm increases withthe input size.</p></div><divid='interview'><p>Also, in Asymptotic analysis, we always talk aboutinput sizes larger than a constant value. It mightbe possible that those large inputs are never givento your software and an algorithm which isasymptotically slower, always performs better foryour particular situation. So, you may end up choosingan algorithm that is Asymptotically slower but fasterfor your software.</p></div></div><scriptsrc=</script><scriptsrc=</script><script>$(document).ready(function() {$("#neveropen").tabs().css({'min-height': '100px','overflow': 'auto'});})</script></body></html> - Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
