Dynamic setting class names / inline html

I am currently trying to find a way to assign a certain class name for an element. I'm using a bootstrap framework to created a tabbed element. This element runs a for loop to make tabs and tab content for each item in a specific folder. Because of the for loop, each tab and content box has the same class. But, for this element to look right when the page loads, it should have a default tab (like the first one) that is displayed. The default tabs and content boxes need to have "active" and "active in" in their respective class names.

My question is since the for loop makes them all the same, how can I code this to make the first tab and content box "active" and leave the rest as is? Also, would it be possible to use an if else statement. I'm not experienced yet with PHP, so I might not understand a solution using it.

I would like to do this inline, like say (href='stuff' class='inline stuff here' / maybe class="inline if else statement") I know it may not be the best method, but i would like to try that first. If I must do it a different way, I will try.

<ul class="nav nav-tabs">
@foreach(var sections in Links)
{
    <li><a href="#" data-toggle="tab">@sections.title</a><li>
}

<div class="tab-content">
@foreach(var content in Links)
{
     <div class="tab-pane fade" id="#">
          @content.bodytext
     </div>
}

What is the best method to make the code assign "active" to the first tab and "active in" to the first tab content while leaving the rest to be normal so the first tab and content will load by default on the page?

Thank you so much in advance for the help!