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();
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:
Please Login to comment...