Canvas Support

how to link to a specific tab and show its content from another html page..

3 replies·opened Jun 15, 2016
W
webdsgnJun 15, 2016

Hello,

I would like to know how to linke to a specific tab and show its content from another html page.

For example,
I would like to know **how to give a link ** in **index.html **page to be linked a tab of "menu 3" by showing its content in detail.html page.

Thank you always for your great support.

S
SemiColonWebSTAFFJun 17, 2016

Hello,

This is Absolutely Possible. However we will need to use the .customjs Functionality for this. Follow the Steps below:

  1. Add the .customjs Class to the .tabs Element. Also make sure that the .tabs Element has a Unique HTML ID. Example:
<div class="tabs customjs clearfix" id="tabs">

	<ul class="tab-nav clearfix">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>

	<div class="tab-container">

		<div class="tab-content clearfix" id="tab-1">
			This is Tab 1 Content
		</div>
		<div class="tab-content clearfix" id="tab-2">
			This is Tab 2 Content
		</div>
		<div class="tab-content clearfix" id="tab-3">
			This is Tab 3 Content
		</div>

	</div>

</div>
  1. Now Initialize the Tabs by adding the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking:
<script>
	jQuery(document).ready( function($){
		$( "#tabs" ).tabs({
			show: {
				effect: "fade",
				duration: 400
			}
		});
	});
</script>

Now, you can simply add the Tab ID at the end of the URL: http://your-website.com/page.html#tab-2 .

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

W
webdsgnJul 12, 2016

Thanks for your reply but it didn't work for this portfolio tabs.

Would you please kindly provide script for this case?
I would like to show 2 articles from a link in another HTML page, and the first tab should be active color as well even though the 3rd tab is selected initially.
Question1 : How should I give a link in another HTML page in order to show each article for .pf-tab1 / .pf-tab2 / .pf-tab3 / .pf-tab4?
Questions2 : How can show the linked tab color active with above link? Now, it always shows 3rd tab active with class="activeFilter"

Thank you so much for your time and help.

<ul class="portfolio-filter clearfix" data-container="#portfolio">
	<li><a href="#">TAB1</a></li>
	<li><a href="#">TAB2</a></li>
	<li class="activeFilter"><a href="#">TAB3</a></li>
	<li><a href="#">TAB4</a></li>
	<li class="hidden-xs"><a href="#">Show All</a></li>

</ul><!-- #portfolio-filter end -->

<a href="#">
<div class="portfolio-shuffle" >
	<i class="icon-search3"></i>
</div></a>

<div class="clear"></div>

<!-- Portfolio Items
============================================= -->
<div id="portfolio" class="portfolio grid-container portfolio-2 clearfix" data-layout="fitRows">

	<!-- TAB1 ::
	============================================= -->
	<article class="portfolio-item pf-tab1">
		<div class="plans-tb-left">
			<h3>Plan starting at</h3>
			<h1><span>$</span> 4.99</h1>
			<h2>TAB1</h2>
			<h4>ADD TO CART:</h4>
		</div>
	</article>
		<article class="portfolio-item pf-tab1">
		<div class="plans-tb-left">
			<h3>Plan starting at</h3>
			<h1><span>$</span> 4.99</h1>
			<h2>TAB1</h2>
			<h4>ADD TO CART:</h4>
		</div>
	</article>

		<!-- TAB2 ::
	============================================= -->
	<article class="portfolio-item pf-tab2">
		<div class="plans-tb-left">
			<h3>Plan starting at</h3>
			<h1><span>$</span> 4.99</h1>
			<h2>TAB1</h2>
			<h4>ADD TO CART:</h4>
		</div>
	</article>
		<article class="portfolio-item pf-tab2">
		<div class="plans-tb-left">
			<h3>Plan starting at</h3>
			<h1><span>$</span> 4.99</h1>
			<h2>TAB1</h2>
			<h4>ADD TO CART:</h4>
		</div>
	</article>
......

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard