cshtml
@Html.Widget("productdetails_before_collateral", Model.Id)
<!-- Ademir dodao -->
<ul class="tabs">
<li class="active"><a href="#">Opis Artikla</a></li>
<li><a href="#">Specifikacije</a></li>
<li><a href="#">Tagovi</a></li>
<!-- add as many as you want -->
</ul>
<div id="container">
<section>
@if (!String.IsNullOrEmpty(Model.FullDescription))
{
<div class="full-description" itemprop="description">
@Html.Raw(Model.FullDescription)
</div>
}
</section>
<section>
@Html.Partial("_ProductSpecifications", Model.ProductSpecifications)
</section>
<section>
@Html.Partial("_ProductTags", Model.ProductTags)
</section>
<!-- add as many as you want -->
</div>
JavaScript:
<script type="text/javascript">
$("ul.tabs a").click(function (e)) {
/* stop default action of navigating to # */
e.preventDefault();
/* make the clicked link active and others inactive */
$(this).closest("li").addClass("active").siblings().removeClass("active");
/* get the index of the tab (zero indexed) - first (0), second (1), etc. */
var i = $(this).closest("li").index();
/* show the section with the same index and hide others - easier than using IDs but means HTML must be in strict order */
$("#container section:eq(" + i + ")").show().siblings().hide();
};
</script>
CSS
/*ADEMIR DODAO*/
ul.tabs
{
list-style:none;
margin:0;
padding:0
}
ul.tabs li
{
display:inline-block;
padding:5px 8px;
margin-bottom:-1px;
border:solid 1px #ccc;
border-top-left-radius:5px;
border-top-right-radius:5px;
background:#f1f1f1
}
/* the margin-bottom makes the tab and container borders overlap */
ul.tabs li.active
{
border-bottom:solid 1px #fff;
background:#fff
}
#container
{
padding:20px;
border:solid 1px #ccc;
background:#fff
}
#container section
{
display:none
}
#container section:first-child
{
display:block
}
Everything looks okay, but javascript is not working, what should i do ?
Preview:
