Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • René Andersen 238 posts 684 karma points
    Feb 09, 2015 @ 19:02
    René Andersen
    0

    Active / inactive tab

    Hi

    I have this code which output every <li class> as active. How is it possible to only make the current selected tab active?

    <ul class="nav nav-tabs">
      @foreach (var tabItem in node.Children.Where("Visible"))
        {
          <li class="active">
            <a href="somelink"</a>
          </li>
        }
    </ul>

    I have tried using some of the code from the standard Umbraco navigation but without luck. I have added the standard Umbraco navigation code below:

    <ul>
      @foreach (var page in root.Children.Where("Visible"))
      {
        <li class="@(page.IsAncestorOrSelf(CurrentPage) ? "current" : null)">
          <a href="@page.Url">@page.Name</a>
        </li>
      }
    </ul>

    Am i on the right track?

    // René

    Copy Link
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Feb 09, 2015 @ 19:10
    Dennis Aaen
    0

    Hi René,

    I think you are on the right track, you should be able to do this:

    <ul class="nav nav-tabs">
      @foreach (var tabItem in node.Children.Where("Visible"))
        {
          <li class="@(tabItem.IsAncestorOrSelf(CurrentPage) ? "active" : null)">
            <a href="somelink"</a>
          </li>
        }
    </ul>

    Hope this helps,

    /Dennis

    Copy Link
  • René Andersen 238 posts 684 karma points
    Feb 09, 2015 @ 19:30
    René Andersen
    0

    Hi Dennis,

    Unfortunately that does not work. All <li> classes are still set as active. I found some of my old code but that does not work either. See below:

    <li>
     <a href="@page.Url"@Library.If(isSelected, "class=\"active\"", "")>@page.Name</a>
    </li>

    Any other suggestions?

    // René

    Copy Link
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Feb 09, 2015 @ 20:55
    Dennis Aaen
    1

    Hi René

    Is it right that you don´t change page when you show the differeent tabs, if this the case, I think is why the @(tabItem.IsAncestorOrSelf(CurrentPage) ? "active" : null) dosen´t work.

    To get it to work I think you need to use some jQuery to set the active class on the tab. Perhaps these links can help you http://stackoverflow.com/questions/21860658/how-to-set-active-tab-in-jquery-ui and http://stackoverflow.com/questions/20705905/bootstrap-3-jquery-event-for-active-tab-change

    Hope this helps,

    /Dennis

    Copy Link
  • René Andersen 238 posts 684 karma points
    Feb 09, 2015 @ 21:10
    René Andersen
    0

    Hi Dennis

    That's correct I don't change page. I will look at your links and post the solution if I manage to get it working.

    Thanks!

    // René

    Copy Link
  • René Andersen 238 posts 684 karma points
    Feb 09, 2015 @ 21:57
    René Andersen
    1

    Finally I found a solution, see below:

    <ul class="nav nav-tabs">
      @foreach (var tabItem in node.Children.Where("Visible"))
      {
        var itemClass = tabItem.IsFirst("active");

        <li class="@itemClass">
          <a href="#@tabItem.featureType" data-toggle="tab"><i class="icon-star"></i>@tabItem.featureheadline</a>
        </li>
      }
    </ul>

    // René

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft