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 4457 posts 17970 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 4457 posts 17970 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

  • 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.

Please Sign in or register to post replies