Open In App

Semantic-UI | Tab

Improve
Improve
Like Article
Like
Save
Share
Report

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: 
 

 



Last Updated : 29 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads