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"  role="tablist">
 <li role="presentation" >
   <a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">Step 01</a>
 </li>
 <li role="presentation" >
   <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.

CodePudding user response：

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"  @Html.Raw( this.Model.CurrentId == 1 ? CHECKED : "" ) />
<input id="tab1Trigger" type="radio" name="tabsSet1"  @Html.Raw( this.Model.CurrentId == 2 ? CHECKED : "" ) />
<input id="tab2Trigger" type="radio" name="tabsSet1"  @Html.Raw( this.Model.CurrentId == 3 ? CHECKED : "" ) />
<input id="tab3Trigger" type="radio" name="tabsSet1"  @Html.Raw( this.Model.CurrentId == 4 ? CHECKED : "" ) />
-->

<input id="tab0Trigger" type="radio" name="tabsSet1"  checked="checked" />
<input id="tab1Trigger" type="radio" name="tabsSet1"  />
<input id="tab2Trigger" type="radio" name="tabsSet1"  />
<input id="tab3Trigger" type="radio" name="tabsSet1"  />

<ul >
    <li >
        <label for="tab0Trigger" >Tab 1</label>
    </li>
    <li >
        <label for="tab1Trigger" >Tab 2</label>
    </li>
    <li >
        <label for="tab2Trigger" >Tab 3</label>
    </li>
    <li >
        <label for="tab3Trigger" >Tab 4</label>
    </li>
</ul>
<section >

    <div >
      <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 >
      <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 >
      <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 >
      <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>