Semantic-UI | Tab
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();
<!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 > |
chevron_right
filter_none
Output:
Example: The following example demonstrates multiple tabs group.
<!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 contigious 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 > |
chevron_right
filter_none
Output: