Semantic UI is an open-source framework that provides user-friendly tabs to create great user interfaces for websites. It is very much similar to bootstrap usages for creating amazing websites. It uses a class to add styles to different elements of the HTML page structure. A tab is a hidden section of content that can be viewed by clicking on it. You can have any number of tabs depending on the need.
Example: The following example demonstrates the use of semantic-UI tabs.
$('.menu .item').tab();
html
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href=
rel="stylesheet" />
</ head >
< body >
< div style="margin-top: 100px" class="ui container">
< h2 >Tabs</ h2 >
< h2 >Hello welcome to geeksforgeeks</ h2 >
< div class="ui top attached tabular menu">
< a class="active item" data-tab="first">Home</ a >
< a class="item" data-tab="second">What we do</ a >
< a class="item" data-tab="third">Jobs</ a >
</ div >
< div class="ui bottom attached
active tab segment" data-tab="first">
Welcome to geeksforgeeks.
</ div >
< div class="ui bottom attached
tab segment" data-tab="second">
Provide tutorials for learning.
</ div >
< div class="ui bottom attached
tab segment" data-tab="third">
Email your resume at careers@geeksforgeeks.org
</ div >
</ div >
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</ script >
< script src=
</ script >
< script >
$('.menu .item').tab();
</ script >
</ body >
</ html >
|
Output:
Example: The following example demonstrates multiple tabs group.
html
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href=
rel="stylesheet" />
</ head >
< body >
< div style="margin-top: 100px"
class="ui container">
< h2 >Tabs</ h2 >
< h2 >Hello, welcome to geeksforgeeks</ h2 >
< div id="context1">
< div class="ui secondary menu">
< a class="item" data-tab="first">
Data Structure
</ a >
< a class="item active" data-tab=
"second">Web Programming
</ a >
< a class="item" data-tab="third">
Basic Programming
</ a >
</ div >
< div class="ui tab segment" data-tab="first">
< div class="ui top attached tabular menu">
< a class="active item" data-tab=
"first/a">Array</ a >
< a class="item" data-tab=
"first/b">Link-List</ a >
< a class="item" data-tab=
"first/c">Tree</ a >
</ div >
< div class="ui bottom attached active tab
segment" data-tab="first/a">
Collection of data under similar
data type with contiguous memory.
</ div >
< div class="ui bottom attached tab
segment" data-tab="first/b">
Collection of data with
dynamic memory allocation
</ div >
< div class="ui bottom attached
tab segment" data-tab="first/c">
Tree like structure to store data
</ div >
</ div >
< div class="ui tab segment active"
data-tab="second">
< div class="ui top attached
tabular menu">
< a class="item" data-tab=
"second/a">Django</ a >
< a class="item" data-tab=
"second/b">NodeJS</ a >
< a class="item active"
data-tab="second/c">Laraval</ a >
</ div >
< div class="ui bottom attached
tab segment" data-tab="second/a">
Python Framework
</ div >
< div class="ui bottom attached tab
segment" data-tab="second/b">
JavaScript Framework
</ div >
< div class="ui bottom attached tab
segment active" data-tab="second/c">
PHP framework
</ div >
</ div >
< div class="ui tab segment" data-tab="third">
< div class="ui top attached tabular menu">
< a class="item" data-tab="third/a">C</ a >
< a class="item" data-tab="third/b">C++</ a >
< a class="item" data-tab="third/c">Java</ a >
</ div >
< div class="ui bottom attached tab
segment" data-tab="third/a">
The most basic programming language.
</ div >
< div class="ui bottom attached tab
segment" data-tab="third/b">
C language with object oriented feature
</ div >
< div class="ui bottom attached tab
segment" data-tab="third/c">
Java is most popular enterprise
programming language.
</ div >
</ div >
</ div >
</ div >
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</ script >
< script src=
</ script >
< script >
$('.menu .item').tab();
</ script >
</ body >
</ html >
|
Output: