JSFiddle - React, Tailwind, and code Playground

by Manikandan Kalaivanan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<div id="geeks">
  <ul>
    <li><a href="Algorithms">Algorithms</a></li>
    <li><a href="Data_Structure">Data Structure</a></li>
    <li><a href="Practice">Practice</a></li>
    <li><a href="interview">interview</a></li>
  </ul>
  <div class="wrapper">
    <div class="tabContent" data-id="Algorithms">
    <p>
      The answer to this is simple, we can have all the above things only if we
      have performance. So performance is like currency through which we can buy
      all the above things. Another reason for studying performance is – speed
      is fun!
    </p>
  </div>
  <div class="tabContent" data-id="Data_Structure">
    <p>
      For example, let us say, we want to store marks of all students in a
      class, we can use an array to store them. This helps in reducing the use
      of number of variables as we don’t need to create a separate variable for
      marks of every subject. All marks can be accessed by simply traversing the
      array.
    </p>
  </div>
  <div class="tabContent" data-id="Practice">
    <p>
      Asymptotic Analysis is the big idea that handles above issues in analyzing
      algorithms. In Asymptotic Analysis, we evaluate the performance of an
      algorithm in terms of input size (we don’t measure the actual running
      time). We calculate, how does the time (or space) taken by an algorithm
      increases with the input size.
    </p>
  </div>
  <div class="tabContent" data-id="interview">
    <p>
      Also, in Asymptotic analysis, we always talk about input sizes larger than
      a constant value. It might be possible that those large inputs are never
      given to your software and an algorithm which is asymptotically slower,
      always performs better for your particular situation. So, you may end up
      choosing an algorithm that is Asymptotically slower but faster for your
      software.
    </p>
  </div>
  </div>
</div>

SCSS

#geeks {
  ul {
    display: flex;  
    list-style: none;
    li {
      padding: 10px;
      background-color: yellow;
      color: blue;
      margin-right: 10px;
      }
    }
  
  .tabContent {
  &:not(:nth-child(1)) {
    display: none;
  }
}
}

JavaScript

$(function() {
  $('#geeks ul li a').on('click', function(e) {
    e.preventDefault();
    var tabId = $(this).attr('href');
    $('.tabContent').hide();
    $('* [data-id="' + tabId + '"]').show();
  });
})