Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Link to External Page #128

Closed
xann1891 opened this issue Mar 9, 2017 · 4 comments
Closed

Link to External Page #128

xann1891 opened this issue Mar 9, 2017 · 4 comments

Comments

@xann1891
Copy link

xann1891 commented Mar 9, 2017

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
Copy link
Owner

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
Copy link
Owner

Closing this for now

@oilvier
Copy link

oilvier commented Oct 31, 2017

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
Copy link

oilvier commented Oct 31, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants