Tab Type 2

HTML

<div class="container pt45 pb45">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-2">
<ul class="nav nav-tabs tabs-left sideways">
<li class="active"><a href="#home-v" data-toggle="tab">Ürünlerimiz</a></li>
<li><a href="#profile-v" data-toggle="tab">Kapmanyalar</a></li>
<li><a href="#messages-v" data-toggle="tab">Satış Sonrası</a></li>
<li><a href="#settings-v" data-toggle="tab">S.S.S</a></li>
</ul>
</div>
<div class="col-sm-10 tabwrapper">
<div class="tab-content">
<div class="tab-pane active" id="home-v">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<img src="https://www.antalyawebtasarim.com/destek/resimler/placeholders/urun1.jpg" class="img-responsive" />
</div>
<div class="col-sm-6">
<h3>Little Black Dress</h3>
<p>
Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. </p>
<p>
<a href="#">Devamı &raquo;</a>
</p>
</div>
</div>
</div>
<div class="col-md-6 text-right">
<div class="row">
<div class="col-sm-6">
<h3>Lingrie Dress</h3>
<p>
Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır.
</p>
<p>
<a href="#">Devamı &raquo;</a>
</p>
</div>
<div class="col-sm-6">
<img src="https://www.antalyawebtasarim.com/destek/resimler/placeholders/urun4.jpg" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="profile-v">Profile Tab.</div>
<div class="tab-pane" id="messages-v">Messages Tab.</div>
<div class="tab-pane" id="settings-v">Settings Tab.</div>
</div>
</div>
</div>
</div>
</div>

CSHTML (Alt Kategori ve Makaleleri Getir)

@{
int vtabsay = 1;
int vtabconsay = 1;
int vtabmaksay = 1;
<div class="container pt45 pb45">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-2">
<ul class="nav nav-tabs tabs-left sideways">
@foreach (MakaleKategori kategorim in Partial.KategorilerAltSira(1, dilk))
{
if (vtabsay == 1)
{
<li class="active"><a href="#@(kategorim.MakaleKategoriLink)" data-toggle="tab">@kategorim.MakaleKategoriAdi.HtmlEncode()</a></li>
}
else
{
<li><a href="#@(kategorim.MakaleKategoriLink)" data-toggle="tab">@kategorim.MakaleKategoriAdi.HtmlEncode()</a></li>
}
vtabsay++;
}
</ul>
</div>
<div class="col-sm-10 tabwrapper">
<div class="tab-content">
@foreach (MakaleKategori kategorim in Partial.KategorilerAltSira(1, dilk))
{
if (vtabconsay == 1)
{
<div class="tab-pane active" id="@kategorim.MakaleKategoriLink">
<div class="row">
@foreach (Makale makalem in Partial.MakalelerID(kategorim.MakaleKategoriID, 0, 2, "sira", false))
{
if (vtabmaksay % 2 == 0)
{
<div class="col-md-6 text-right">
<div class="row">
<div class="col-sm-6">
<h3>@makalem.MakaleBaslik.HtmlEncode()</h3>
<p>
@Partial.MakaleOzeti(makalem.MakaleID, 170)
</p>
<p>
<a href="@Partial.MakaleLink(makalem.MakaleID)">Devamı &raquo;</a>
</p>
</div>
<div class="col-sm-6">
<img src="@makalem.MakaleKucukResim" class="img-responsive" />
</div>
</div>
</div>
}
else
{
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<img src="@makalem.MakaleKucukResim" class="img-responsive" />
</div>
<div class="col-sm-6">
<h3>@makalem.MakaleBaslik.HtmlEncode()</h3>
<p>
@Partial.MakaleOzeti(makalem.MakaleID, 170)
</p>
<p>
<a href="@Partial.MakaleLink(makalem.MakaleID)">Devamı &raquo;</a>
</p>
</div>
</div>
</div>
}
vtabmaksay++;
}
</div>
</div>
}
else
{
<div class="tab-pane" id="@kategorim.MakaleKategoriLink">
<div class="row">
@foreach (Makale makalem in Partial.MakalelerID(kategorim.MakaleKategoriID, 0, 2, "sira", false))
{
if (vtabmaksay % 2 == 0)
{
<div class="col-md-6 text-right">
<div class="row">
<div class="col-sm-6">
<h3>@makalem.MakaleBaslik.HtmlEncode()</h3>
<p>
@Partial.MakaleOzeti(makalem.MakaleID, 170)
</p>
<p>
<a href="@Partial.MakaleLink(makalem.MakaleID)">Devamı &raquo;</a>
</p>
</div>
<div class="col-sm-6">
<img src="@makalem.MakaleKucukResim" class="img-responsive" />
</div>
</div>
</div>
}
else
{
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<img src="@makalem.MakaleKucukResim" class="img-responsive" />
</div>
<div class="col-sm-6">
<h3>@makalem.MakaleBaslik.HtmlEncode()</h3>
<p>
@Partial.MakaleOzeti(makalem.MakaleID, 170)
</p>
<p>
<a href="@Partial.MakaleLink(makalem.MakaleID)">Devamı &raquo;</a>
</p>
</div>
</div>
</div>
}
vtabmaksay++;
}
</div>
</div>
}
vtabconsay++;
}
</div>
</div>
</div>
</div>
</div>
}