CMS/Pages and Tabbed Content URLs

[Dreadknux]

Hello! Sorry if this is in the wrong forum, but I had a question about IPB's built-in tabbing tools and was hoping someone could steer me in the right direction.

So I have a Pages database set up, organised as a sort of archive for certain video game releases. I have included a tabbed section in order to segment off parts of each record; I want to add a slug to the end of the record's url when they click to a specific tab, which I've managed to do by following the IPB documentation on ips.ui.tabbar. But it seems that the slug doesn't actually do anything besides cosmetic effect - when they click to a tab, then refresh the page with the url slug appended, they see a 404 error instead of the tab they were just on. 

Here's an example of my code:

<div class="ipsTabs ipsTabs_contained ipsTabs_withIcons ipsTabs_large ipsClearfix ipsResponsive_pull" id="elTabBar" data-ipstabbar data-ipstabbar-contentarea="#elTabContent" data-ipstabbar-updateurl="true">
	<a href="#elTabBar" data-action="expandTabs"><i class="fa fa-caret-down"></i></a>
	<ul role="tablist">
		<li>
			<a href="page" role="tab" id="1" class="ipsType_center ipsTabs_item ipsTabs_activeItem" aria-selected="true">
				<i class="fa fa-file-text-o" style="font-size: 16px;"></i> Page
			</a>
		</li>
		<li>
			<a href="articles" role="tab" id="2" class="ipsType_center ipsTabs_item">
				<i class="fa fa-newspaper-o" style="font-size: 16px;"></i> Articles
			</a>
		</li>
		<li>
			<a href="media" role="tab" id="3" class="ipsType_center ipsTabs_item">
				<i class="fa fa-picture-o" style="font-size: 16px;"></i> Media
			</a>
		</li>
		<li>
			<a href="reviews" role="tab" id="4" class="ipsType_center ipsTabs_item">
				<i class="fa fa-star-half-o" style="font-size: 16px;"></i> Reviews
			</a>
		</li>
	</ul>
</div>
<article id="elTabContent" class="ipsTabs_panels ipsTabs_contained ipsContained ipsBox ipsResponsive_pull">
	<div id="ipsTabs_elTabBar_1_panel" class='ipsTabs_panel' style="padding:0;">
		PAGE CONTENT
	</div>
	<div id="ipsTabs_elTabBar_2_panel" class='ipsTabs_panel' style="padding: 0 !important;">
		ARTICLES CONTENT
	</div>
	<div id="ipsTabs_elTabBar_3_panel" class='ipsTabs_panel'>
		MEDIA CONTENT
	</div>
	<div id="ipsTabs_elTabBar_4_panel" class='ipsTabs_panel'>  
		REVIEWS CONTENT
	</div>
</article> 

Using the code above, a user will visit and land on the 'Page' part of the page, then may click the 'Articles' tab to view that segment of the page. The browser URL will have domain.com/database/record/articles appended to it. The user then refreshes their browser, and they are greeted with a "Sorry, that page does not exist" error message.

I know logically why this is happening - there is no actual "articles" page for my IPB site to direct the user to - but is there an extra "ips" function I'm missing somewhere in my HTML that would direct the user straight to this tab upon reload? I imagine this is a functionality of the tabbed system otherwise it wouldn't be mentioned in documentation, so I'm assuming I'm just doing something wrong.

Any help would be appreciated! 🙂 

[opentype]

If this is used on a display page for a Pages record, you would not actually load content from a different URL. You would just segment the content and have it all there, so a user can switch between the tabs without ever leaving the page. 

(If you want to use external content, you would either have the external URL provide the tab content or you would add the login of dealing with the tabs to each of the pages that are references. Either way, that would all have to be coded. Nothing like that is provided in the Pages system.)

[teraßyte]

Instead of:

domain.com/database/record/articles

you'd have to use something like this instead:

domain.com/database/record/?tab=articles

 

And then in the template account for the tab variable and switch the active tab based on it.