Tab view active and inactive with model value

I just want to know in my ASP.NET MVC application I just created a tab view.

For the View I pass some data from the controller.

So I need to active and inactive tab according to the value.

like an example.

if(@model.CurrentId == 1)

Then I need to show tab one active and others, inactive. ( active tab with Green color and Gray color like to know)

This is the tab view

<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
 <li role="presentation" class="active">
   <a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">Step 01</a>
 </li>
 <li role="presentation" class="">
   <a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">Step 02</a>
 </li>
</ul>

Do I need to use Javascript for this operation? If yes any example will be helpful.

Answer

As remarked in my comment: you can have fully-interactive and animated tabs to switch content-display without needing any JavaScript at all.

The @model.CurrentId value is used to set the initially-visible tab content (by setting checked="checked" on the hidden trigger radio inputs)

/* Colours derived from https://www.colourlovers.com/palette/92095/Giant_Goldfish */

input.trigger { display: none; }

ul.tabs {
    list-style: none;
    padding: 0.5em 0.5em 0 0.5em;
    margin: 0.25em;
    display: flex;
    justify-content: space-evenly;
    border-radius: 7px;
    background-color: #A7DBD8;
}
  ul.tabs > li {
    display: contents;
  }
    ul.tabs > li > label {
      border-radius: 7px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      padding: 1em 1em;
    }
    ul.tabs > li > label:hover {
      color: white;
    }

label[for].trigger {
    cursor: pointer;
}

input.trigger.t0:checked ~ ul.tabs > li > label.trigger.t0,
input.trigger.t1:checked ~ ul.tabs > li > label.trigger.t1,
input.trigger.t2:checked ~ ul.tabs > li > label.trigger.t2,
input.trigger.t3:checked ~ ul.tabs > li > label.trigger.t3 {
    background-color: #FA6900;
}

input.trigger.t0:not(:checked) ~ ul.tabs > li > label.trigger.t0,
input.trigger.t1:not(:checked) ~ ul.tabs > li > label.trigger.t1,
input.trigger.t2:not(:checked) ~ ul.tabs > li > label.trigger.t2,
input.trigger.t3:not(:checked) ~ ul.tabs > li > label.trigger.t3 {
    background-color: #F8CA00;
}

section.tabsBody {
    display: grid;
    background-color: #A7DBD8;
    border-radius: 7px;
    padding: 1em;
    margin: 0.25em;
    
    grid-template-columns: 1fr;
    grid-template-rows   : 1fr;
    
    overflow: hidden;
}

section.tabsBody > div.triggered {
    transform: translateX(-110%);
    transition: transform 0.2s;
    
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

input.trigger.t0:checked ~ section.tabsBody > div.triggered.t0,
input.trigger.t1:checked ~ section.tabsBody > div.triggered.t1,
input.trigger.t2:checked ~ section.tabsBody > div.triggered.t2,
input.trigger.t3:checked ~ section.tabsBody > div.triggered.t3 {
    transform: translateX(0);
}

<!-- Uncomment this for use as Razor C#:
@model SomeViewModel
@{
    const String CHECKED = @" checked=""checked""";
}

<input id="tab0Trigger" type="radio" name="tabsSet1" class="trigger t0" @Html.Raw( this.Model.CurrentId == 1 ? CHECKED : "" ) />
<input id="tab1Trigger" type="radio" name="tabsSet1" class="trigger t1" @Html.Raw( this.Model.CurrentId == 2 ? CHECKED : "" ) />
<input id="tab2Trigger" type="radio" name="tabsSet1" class="trigger t2" @Html.Raw( this.Model.CurrentId == 3 ? CHECKED : "" ) />
<input id="tab3Trigger" type="radio" name="tabsSet1" class="trigger t3" @Html.Raw( this.Model.CurrentId == 4 ? CHECKED : "" ) />
-->

<input id="tab0Trigger" type="radio" name="tabsSet1" class="trigger t0" checked="checked" />
<input id="tab1Trigger" type="radio" name="tabsSet1" class="trigger t1" />
<input id="tab2Trigger" type="radio" name="tabsSet1" class="trigger t2" />
<input id="tab3Trigger" type="radio" name="tabsSet1" class="trigger t3" />

<ul class="tabs">
    <li class="active">
        <label for="tab0Trigger" class="trigger t0">Tab 1</label>
    </li>
    <li class="">
        <label for="tab1Trigger" class="trigger t1">Tab 2</label>
    </li>
    <li class="">
        <label for="tab2Trigger" class="trigger t2">Tab 3</label>
    </li>
    <li class="">
        <label for="tab3Trigger" class="trigger t3">Tab 4</label>
    </li>
</ul>
<section class="tabsBody">

    <div class="triggered t0">
      <h2>Tab 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et ante convallis leo condimentum consectetur eu sit amet mi. Maecenas et velit sed neque vulputate eleifend ac sit amet urna.</p>
    </div>
    
    <div class="triggered t1">
      <h2>Tab 2</h2>
      <p>Duis lacus ligula, maximus commodo cursus vel, pellentesque et tortor. Curabitur luctus blandit ultrices. Maecenas viverra felis sit amet tempus laoreet. Etiam rhoncus nisi non molestie malesuada. Cras sagittis, augue euismod accumsan imperdiet, elit ligula luctus neque, sed ullamcorper diam quam sit amet nisl.</p>
    </div>
    
    <div class="triggered t2">
      <h2>Tab 3</h2>
      <p>Aliquam molestie tempus massa rutrum molestie. Proin risus nisi, molestie quis erat nec, condimentum consequat erat. Morbi ut luctus dolor. Donec scelerisque dictum justo id consequat. Morbi eget nunc eros. Duis ut odio purus. In ac ex odio. Quisque sollicitudin eget erat ut feugiat. Nullam mollis arcu arcu, vitae mattis mauris posuere sed.</p>
    </div>
    
    <div class="triggered t3">
      <h2>Tab 4</h2>
      <p>unc aliquam scelerisque neque. Nulla venenatis orci velit. Vivamus sem odio, efficitur eu arcu a, vehicula rutrum ante. Integer condimentum mauris enim, sed iaculis urna ultricies ultricies.</p>
    </div>

</section>