Jump to content

Link With Anchor Causes Tab-Formatting JS To Fail


phdphd

Recommended Posts

Hi All,

My home page uses tabs and is based on the following html, JS and CSS. The first tab contains an anchor to another paragraph in the same tab.

<body onload="init()">
<div id="tabTitles">
		<ul id="tabs">
		<li><a href="#tab1">tab1</a></li>
		<li><a href="#tab2">tab2</a></li>
		<li><a href="#tab3">tab3</a></li>
		<li><a href="#tab4">tab4</a></li>
		</ul>
		</div>

		<div class="tabContent" id="tab1">
		
		
		<a href="#other_paragraph">go to other paragraph</a>
		
		<p>tab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content tab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 contenttab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 </p>

		<p id="other_paragraph">tab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 contencontent -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 contenttab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 contenttab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 contenttab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 contenttab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 contenttab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content </p>
		</div>
		
		<div class="tabContent" id="tab2">
		
		tab2 content - tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content
		
		</div>
		<div class="tabContent" id="tab3">
		
		
		tab3 content - tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content
		</div>
		
		<div class="tabContent" id="tab4" >
		
		tab4 content - tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content
		
		</div>
</body>
    var tabLinks = new Array();
var contentDivs = new Array();

function init() {
//Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
    if (tabListItems[i].nodeName == "LI") {
        var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
        var id = getHash( tabLink.getAttribute('href') );
        tabLinks[id] = tabLink;
        contentDivs[id] = document.getElementById( id );
    }
}

//Assign onclick events to the tab links, and
//highlight the first tab
var i = 0;

for( var id in tabLinks ) {
    tabLinks[id].onclick = showTab;
    tabLinks[id].onfocus = function() { this.blur()};
    if (i == 0 ) tabLinks[id].className = 'selected';
    i++;
}

//Hide all content divs except the first
var i = 0;

for( var id in contentDivs ) {
    if ( i !=0 ) contentDivs[id].className='tabContent hide';
    i++;
}

//Show linked tab
if ( document.location.hash ) showTab( document.location.hash.substring(1) );
} // end of init function

// ShowTab Function

function showTab(selectedId) {
if ( typeof selectedId != 'string' ) var selectedId = getHash(this.getAttribute('href') );

//Highlight the selected tab, and dim all others.
//Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
    if ( id == selectedId ) {
        tabLinks[id].className = 'selected';
        contentDivs[id].className = 'tabContent';
    } else {
        tabLinks[id].className ='';
        contentDivs[id].className = 'tabContent hide';
    }
}

//Stop the Browser following the link.
return false;
} //end of showTab function

function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
    if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}

function getHash(url) {
var hashPos = url.lastIndexOf( '#' );
return url.substring(hashPos + 1);
}
 ul#tabs
			{ 
			list-style-type: none; 
			margin: 1em 0 0 0; 
			padding: 0 0 0.3em 0; 
			
			}
			
      ul#tabs li 
			{ 
			display: inline-block;
			margin: 0.3em 0;
			padding: 0.3em 0 0 0; 
			}
			
      ul#tabs li a 
			{
			color: #000000; 
			background-color: #f1f0ee;
			border: 1px solid #c9c3ba; 
			padding: 0.3em; 
			text-decoration: none;
			border-radius:0.2em;
			}
			
			
      ul#tabs li a:hover 
			{
			background-color: #dedbde; 
			}
			
      ul#tabs li a.selected 
			{
			color: #FFFFFF; 
			background-color: #000000; 
			font-weight: bold; 
			
			border: 1px solid #000000;
			}
			
      div.tabContent
			{
			border: 1px solid #c9c3ba; 
			padding: 0 0.1em 0 0.5em; 
			background-color: #FFFFFF;
			margin-top:0.21em;
			border-radius: 0.2em;
			padding-bottom:0.7em;
			overflow:hidden
			}
			
      div.tabContent.hide
			{
			display: none;
			}

I noticed that if I click the anchor, then refresh the page, the home page displays only the tab titles.

 

I also noticed that if I disable the JS, the full page displays (except that it is not tab-organized, of course).

 

I guess that the anchor in the link causes the JS to fail. Is it possible to fix this ?

 

Thanks !

Link to comment
Share on other sites

Clicking the link puts the #anchor in the URL. Refreshing the page will keep that URL but reset the page to the state it was delivered by the server.

 

Either

a) Clicking the link should not update the URL. Refreshing will go back to the original state.

b) Update the URL, and include some Javascript that runs on page load to check if there is an #anchor and update the page as needed.

Link to comment
Share on other sites

Thanks for always being so quick at answering - at least my questions ;-). Much appreciated!

I've just tried a workaround close to b).

if(window.location.hash) {
  var newurl= window.location.href.substr(0, window.location.href.indexOf('#'));

window.location = newurl;
} else {
  // Fragment doesn't exist
}
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.