1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 XF Tabs Issue (not navbar tabs)

Discussion in 'Troubleshooting and Problems' started by PrettyPixels, May 12, 2014.

  1. PrettyPixels

    PrettyPixels Active Member

    I've created some custom tabs as described here. They work perfectly, except for one thing -- when I try to link a tab to a page outside the current page, it doesn't work. I simply get a blanked out tab instead of clicking through to the specified URL. All the other tabs (that link to content within the same page) work correctly.

    I've formatted my link using a full URL and a "target" tag, but clicking it still stays in the same page and doesn't open the URL I've specified.

    Any ideas why the external link won't work? I appreciate any help or insights into this -- it's been driving me crazy. ;)

    Here's what the code looks like:

    Code:
    <ul id="roleplaytabs" class="Tabs tabs" data-panes="#roleplay > li">
        <li>
            <a href="roleplay-topic">Role Playing</a>
        </li>
        <li>
            <a href="http://mydomain.com" target="_self">External Link</a>
        </li>
        <li>
            <a href="about-the-game">About the Game</a>
        </li>
        <li>
            <a href="roleplay-getting-started">Getting Started</a>
        </li>
        <li>
            <a href="roleplay-helpful-links">Helpful Links</a>
        </li>
    </ul>
    <br />
    
    <ul id="roleplay">
        <li>
             <h2>Role Playing</h2>
        </li>
        <li><!-- This is a placeholder for the external link. If it's not here, the tabs will be out of place by one. --></li>
        <li>
            <h2>About the Game</h2>
        </li>
        <li>
            <h2>Getting Started</h2>
        </li>
        <li>
            <h2>Helpful Links</h2>
       </li>
    </ul>
    
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    You are using relative links.

    What are the actual URLs of those links?

    If they are pages within XenForo then use xen:link, otherwise use the absolute URL.
     
  3. Chris D

    Chris D XenForo Developer Staff Member

    In addition, the links should be anchors.

    Take a look at how this is implemented in the member_view template.

    Code:
                <ul class="tabs mainTabs Tabs" data-panes="#ProfilePanes > li" data-history="on">
                    <li><a href="{$requestPaths.requestUri}#profilePosts">{xen:phrase profile_posts}</a></li>
                </ul>
    Notice how the tab href is structured.

    In addition, the #profilePosts bit relates to the ID of the tab element:
    Code:
            <ul id="ProfilePanes">
                <li id="profilePosts" class="profileContent"></li>
            </ul>
    
     
  4. PrettyPixels

    PrettyPixels Active Member

    Got it! Thanks so much for your help! :)
     
  5. Jaxel

    Jaxel Well-Known Member

    Hey... what does the
    Code:
    data-history="on"
    property do?
     

Share This Page