Link to Tab on an External Page

**bunchobabyducks** · 03-08-2013 09:57 AM

Hey there folks!

Thanks in advance for the wonderful assistance and guidance you're always willing to provide!

I have a tabbed layout scripted as such:

Code:

<div id="tabbedBox1" class="tabbedBox">
	<div class="tabbedArea">
	<ul class="tabs">
		<li><a id="tab_1" class="active" href="javascript:tabSwitch (1, 3, 'tab_', 'stuff_');">Tab 1</a></li>
		<li><a id="tab_2" href="javascript:tabSwitch (2, 3, 'tab_', 'stuff_');">Tab 2</a></li>
		<li><a id="tab_3" href="javascript:tabSwitch (3, 3, 'tab_', 'stuff_');">Tab 3</a></li>
	</ul>

		<div id="stuff_1" class="stuff">
		One Tab.
		</div>

		<div id="stuff_2" class="stuff">
		Two Tabs!!
		</div>

		<div id="stuff_3" class="stuff">
		Four Tabs!!!! Wait...
		</div>

	</div>
</div>

And the Javascript automating the selection of tabs:

Code:

<script type="text/javascript">
function tabSwitch(active, number, tab_prefix, stuff_prefix) {
for (var i=1; i < number+1; i++) {
document.getElementById(stuff_prefix+i).style.display='none';
document.getElementById(tab_prefix+i).className='';
}
document.getElementById(stuff_prefix+active).style.display='block';
document.getElementById(tab_prefix+active).className='active';
};
</script>
<script type="text/javascript">

My issue is, when I attempt to link to—let's say—tab 2 using #tab_2 in the link and having another script select based on a search for the hash, it merely highlights the tab and doesn't make the content active/displayed.

If you'd like to see some of the options I've tried, I'd be happy to post it. Thanks again!!!

Sincerely,
A Bunch of Baby Ducks

**JMRKER** · 03-09-2013 09:32 AM

Consider this...

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> QueryTab </title>
</head>
<body>
<div id="tabbedBox1" class="tabbedBox">
  <div class="tabbedArea">
    <ul class="tabs">
      <li><a id="tab_1" class="active" href="javascript:tabSwitch (1, 3, 'tab_', 'stuff_');">Tab 1</a></li>
      <li><a id="tab_2" href="javascript:tabSwitch (2, 3, 'tab_', 'stuff_');">Tab 2</a></li>
      <li><a id="tab_3" href="javascript:tabSwitch (3, 3, 'tab_', 'stuff_');">Tab 3</a></li>
    </ul>
  <div id="stuff_1" class="stuff">    One Tab.  </div>
  <div id="stuff_2" class="stuff">    Two Tabs!!  </div>
  <div id="stuff_3" class="stuff">    Four Tabs!!!! Wait...  </div>
  </div>
</div>

<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?274285-Link-to-Tab-on-an-External-Page

function tabSwitch(active, number, tab_prefix, stuff_prefix) {
  for (var i=1; i < number+1; i++) {
    document.getElementById(stuff_prefix+i).style.display='none';
    document.getElementById(tab_prefix+i).className='';
  }
  document.getElementById(stuff_prefix+active).style.display='block';
  document.getElementById(tab_prefix+active).className='active';
};

// Following from: http://javascript.about.com/library/blqs1.htm
var qsParm = new Array();
function qs() {
  var query = window.location.search.substring(1);
  var parms = query.split('&');
  for (var i=0; i<parms.length; i++) {
    var pos = parms[i].indexOf('=');
    if (pos > 0) {
      var key = parms[i].substring(0,pos);
      var val = parms[i].substring(pos+1);
      qsParm[key] = val;
    }
  }
} 

window.onload = function() {
 qsParm['tab'] = null;
 qs();                                // script called by "filename.html" or "filename.html?tab=3"
 var tabInfo = qsParm['tab'];
 if (tabInfo == undefined) { tabSwitch( 1, 3, 'tab_', 'stuff_'); }
                      else { tabSwitch( tabInfo, 3, 'tab_', 'stuff_'); }
}
</script>

</body>
</html>

Call the program using either
"filename.html" <-- default
or "filename.html?tab=3" <-- example to display tab 3

Thread: Link to Tab on an External Page

Thread Tools

Display

Link to Tab on an External Page

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions