I find it hard du explain my problem but I will try anyway :-)
I need a solution where some information has to be shown as tabs like the picture below:
The problem is that my CSS has to use active tab class on the active tab and a inactive class on the tabs which is not selected. See HTML below (This HTML is what i need the Razor script to do):
<div class="tabbable tabs-left"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li> <li><a href="#tab2" data-toggle="tab">Tab2</a></li> </ul> <div id="myTabContent" class="tab-content"> <!--tab 1--> <div class="tab-pane fade in active" id="tab1"> <img src="img/small/s8.jpg" class=" pull-left" alt="Image" title="Image" /> <h6><span>Made for everyone</span> and packed with features</h6> <p>Sleek, intuitive, and powerful front-end framework for faster.</p> </div> <!--tab 2--> <div class="tab-pane fade" id="tab2"> <img src="img/small/s8.jpg" class=" pull-left" alt="Image" title="Image" /> <h6><span>Made for everyone</span> and packed with features</h6> <p>Sleek, intuitive, and powerful front-end framework for faster.</p> </div> </div> </div>
And my razor looks like this where most of it is working, but I dont know how to make the active class working.
Active tab problem
Hello everybody
I find it hard du explain my problem but I will try anyway :-)
I need a solution where some information has to be shown as tabs like the picture below:
The problem is that my CSS has to use active tab class on the active tab and a inactive class on the tabs which is not selected. See HTML below (This HTML is what i need the Razor script to do):
And my razor looks like this where most of it is working, but I dont know how to make the active class working.
Thanks in advance!
//René
HI Rene,
From your loop you are using in your code i assume you are using some node to represent the tabs right?
If so you can make use of a variable in your <div class="tab-pane ... ">
Try somthing like
@foreach(var page in @Model.Children.Where("Visible")){string active = (p.IsAncestorOrSelf(@Model))? "active":"";
<div class="tab-pane @active ">
}
Hi Fuji
Ahh I am not good at this :-)
I have made some minor changes to the Razor, see below:
@inherits umbraco.MacroEngines.DynamicNodeContext
<div class="container wrapper">
<div class="inner_content">
<div class="pad30"></div>
<div class="row">
@foreach (var page in @Model.Children.Where("Visible"))
{
<div class="tab-pane fade in active" id="@page.id">
<div class="span8 offset2"><h1 class="post_intro center">@page.header</h1>
<div class="pad30"></div>
<div class="post">
<img src="@page.image" alt="" >
<div class="pad30"></div>
<p>@page.description</p>
<h4 class="grey2"><i class="icon-quote-left icon-3x pull-left colour marg-left5"></i>@page.descriptionQuote</h4>
<div class="pad25"></div>
</div>
</div>
</div>
}
</div>
<div class="row">
<div class="center">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
@foreach (var info in @Model.Children.Where("Visible"))
{
<li><a href="#@info.id" data-toggle="tab">@info.header</a></li>
}
</ul>
</div>
</div>
</div>
</div>
</div>
Now this script generates this output with "class=tab-pane fade in active" on every loop:
<div class="container wrapper">
<div class="inner_content">
<div class="pad30"></div>
<div class="row">
<div class="tab-pane fade in active" id="1124">
<div class="span8 offset2"><h1 class="post_intro center">Opstart</h1>
<div class="pad30"></div>
<div class="post">
<img src="/media/1034/image1.jpg" alt="" >
<div class="pad30"></div>
<p>Some text</p>
<h4 class="grey2"><i class="icon-quote-left icon-3x pull-left colour marg-left5"></i>Some text</h4>
<div class="pad25"></div>
</div>
</div>
</div>
<div class="tab-pane fade in active" id="1125">
<div class="span8 offset2"><h1 class="post_intro center">Efter opstart</h1>
<div class="pad30"></div>
<div class="post">
<img src="/media/1035/image2.jpg" alt="" >
<div class="pad30"></div>
<p>Some text</p>
<h4 class="grey2"><i class="icon-quote-left icon-3x pull-left colour marg-left5"></i>Some text</h4>
<div class="pad25"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="center">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li><a href="#1124" data-toggle="tab">Opstart</a></li>
<li><a href="#1125" data-toggle="tab">Efter opstart</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
I am still not sure where to put in the code you wrote in the last post. Could you please try to put it in my Razor code?
Thank you!
//René
Hi Rene,
Is this where the class = active should be <divclass="tab-pane fade in active"id="1124">?
If so add this here
Hi All,
Am facing same problem.
There are four tabs.
I want create multiple blog for each tab.
I found solution in http://www.umbtuts.net/tutorials/creating-a-simple-blog-in-umbraco-v7/
But how to create for remaining tabs. How to write razor code.
Can you please help....
Thanks Nandish
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.