Link to External Page

[xann1891]

I swtiched to using Responsive-Tabs because it meant that I could turn my tabs into an accordion menu for Tablets and Mobile; however, I just found one thing that is not working properly for me and I'm not sure how to fix it. When I was using the jquery tabs, I was able to link a tab to an outside web page that was not part of my website. to do this, I used the following:

HTML for the inital tab item:

<li class="link"><a href="https://falcontheatre.secure.force.com/ticket" target="_blank">Buy Now</a></li>

JAVASCRIPT

<script>
$(function() {
        //allows link to other page
        $("li.link a").unbind('click');
    });
</script>

When I tried to implement the same thing using Responsive-Tabs instead of jquery Tabs, the code broke and I no longer had tabs, but instead a list and all the contents listed out in longform. The code worked fine as long as I was linking to a page on my own website, just not external websites.

I feel like this should be a simple fix, but I am not able to figure it out on my own. Any help would be appreciated!

[jellekralt]

jQuery Tabs is not 1 on 1 compatible with Responsive Tabs. This library has no support for using tabs to link to a normal link. I guess this could be hacked in a different way, but I unfortunately don't have any time to research this for you.

[jellekralt]

Closing this for now

[oilvier]

Hi,

Don't know if help is still needed, but anyways...

I've stumbled upon the same problem and I might have a solution for you, if you are not affraid of slightly change the source code.

Line 166 of jquery.responsiveTabs.js, you can change the selector to exclude the li(s) that would contain an external link. For example, if we choose the class .js-external-link, you'll have :

$('li:not(.js-external-link)', $ul).each(function() {

and your HTML should look like this :

<ul>
<li><a href="#foo">foo</a></li>
<li><a href="#bar">bar</a></li>
<li class="js-external-link"><a href="https://github.com" target="_blank">baz</a></li>
<ul>

[oilvier]

Or even better, without changing anything, you can use the stateExcluded class !