Semantic-UI Tab Active State

Last Updated : 12 Feb, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI offers a Tab component for users to bundle up different categories of content, showing only one category of content at a time. The other options are shown in boxes aligned in one row. Users can click any one of the options to view that option.

If the content of the tab is static or already loaded then the content can be tagged with active class. There is no need for a loading state in that case. The content can be shown as the user clicks on the tabs menu.

Semantic-UI Tab Active State Class:

active: This class is used to set the state of the tab as the active state.

Syntax:

<div class="ui ... active tab segment">
 <p>...</p>
   ...
</div>

Example: This example demonstrates the Semantic UI Active state using the active class. By default tab 1 is active as seen in the image below. Users can click on the other tabs to make it an active state and view their respective data.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <br /><br /> 
    <div class="ui container"> 
        <h2 class="header ui green"> 
            GeeksforGeeks 
        </h2> 
  
        <strong>Semantic UI Tab Active State</strong> 
          
        <div class="ui top attached tabular menu"> 
            <div class="active item" data-tab="first">Tab</div> 
            <div class="item" data-tab="second">Tab 2</div> 
            <div class="item" data-tab="third">Tab 3</div> 
        </div> 
  
        <div class="ui bottom attached active tab segment"
            data-tab="first"> 
              
            <p>Sample data 1:</p> 
  
            <p> 
                As the placement season is back, 
                GeeksforGeeks is here to help you 
                crack the interview. We have selected 
                some most commonly asked and MUST DO 
                practice problems to crack Product-based 
                Company Interviews. 
  
                You can also take part in our mock  
                placement contests which will help  
                you learn different topics and  
                practice at the same time, simulating 
                the feeling of a real placement test  
                environment. 
            </p> 
  
        </div> 
        <div class="ui bottom attached tab segment" 
            data-tab="second"> 
            <p>Sample data 2:</p> 
  
            <p> 
                As the placement season is back, 
                GeeksforGeeks is here to help you 
                crack the interview. We have selected 
                some most commonly asked and MUST DO 
                practice problems to crack Product-based 
                Company Interviews. 
  
                You can also take part in our mock  
                placement contests which will help  
                you learn different topics and  
                practice at the same time, simulating 
                the feeling of a real placement test  
                environment. 
            </p> 
  
        </div> 
        <div class="ui bottom attached tab segment"
            data-tab="third"> 
              
            <p>Sample data 3:</p> 
            <p> 
                As the placement season is back, 
                GeeksforGeeks is here to help you 
                crack the interview. We have selected 
                some most commonly asked and MUST DO 
                practice problems to crack Product-based 
                Company Interviews. 
  
                You can also take part in our mock  
                placement contests which will help  
                you learn different topics and  
                practice at the same time, simulating 
                the feeling of a real placement test  
                environment. 
            </p> 
        </div> 
    </div> 
      
    <script> 
        $('.menu .item').tab();                   
    </script> 
</body> 
  
</html> 