AJAX tabs - making a new tab and closing it...

[nelboy]

Hi all,

I have a script for a website I am working on where I am planning to use an AJAX tabs script so that content can be switched between without having to reload the entire page.

The tabs script works fine (as it has come from a trusted script source), and I have done further work on the script so that when a certain javascript command is invoked, a "new" tab magically appears to the right of the existing tabs with the requested content, and that tab becoms the 'active tab' so to speak.

The problem comes in switching between the tabs... if you click on another tab, that works fine, but if you click back on the 'new' tab then the browser directs to the page containing the content that should be shown in the DIV layer controlled by the AJAX tabs script.
I have tried an interim script where clicking another tab 'closes' the 'new' tab, however this is doing nothing.
I called the function "clearitoff()" and have tried invoking it in numerous ways, but it doesn't clear the inner HTML of the SPAN called "HiddenTab". the function "newtab(URL,title)" opens the new secret tab - using the 'URL' field so as to know what content to load, and the 'title' to give the new tab a name. Using test links 2 and 3 supplied will change content and the name shown on the tab.

Snippet of HTML in page and the J.S. I added for the new tab (the playsound() function is seperate of the tab script, and makes a 'click' sound when the mouse hovers over a tab):

<!-- UL & LI's converted to Tabs -->
<ul id="MazeTeamtabs" class="reallygoodMTstuff">
<li><a href="#" rel="#default" class="selected" onmouseover="playSound()" onclick="javascript:clearitoff();">Series Overview</a></li>
<li><a href="inpage-wizard-SeriesImage.html" rel="MazeTeamcontainer" onmouseover="playSound()" onclick="javascript:clearitoff(H);">Series Image</a></li>
<li><a href="inpage-wizard-S1Characters.html" rel="MazeTeamcontainer" onmouseover="playSound()" onclick="javascript:clearitoff();">Characters</a></li>
<li><a href="inpage-wizard-S1Artwork.html" rel="MazeTeamcontainer" onmouseover="playSound()" onclick="javascript:clearitoff();">Artwork</a></li>
<li><a href="inpage-wizard-S1Episodes.html" rel="MazeTeamcontainer" onmouseover="playSound()" onclick="javascript:clearitoff();">Watch Episodes</a></li>
<li><a href="inpage-wizard-Information.html" rel="MazeTeamcontainer" onmouseover="playSound()" onclick="javascript:clearitoff();">Information</a></li>
<li><span ID="HiddenTab"></span></li>
</ul>
<script>
function newtab(URL,title){
var TabText = '<a href="'+URL+'" rel="MazeTeamcontainer" onmouseover="playSound()" onclick="MTsystemTabs.expandit(6);">'+title+'</a>';

document.getElementById("HiddenTab").innerHTML = TabText;
MTsystemTabs.expandit(6);
}
function clearitoff()
{document.getElementById("HiddenTab").innerHTML = '';}
</script>

<a href="javascript:dud()" onclick="MTsystemTabs.expandit(5);">Test Link</a><br />
<a href="javascript:newtab('testpage1.html','Test Tab!');">Test Link 2</a><br />
<a href="javascript:newtab('testpage2.html','Second Test!');">Test Link 3</a><br />

<div id="MazeTeamdivcontainer" style="border:1px solid gray; width:700px; margin-bottom: 1em; padding: 10px">

This snippet of script invokes the tabs to operate

<script type="text/javascript">

var MTsystemTabs=new MTtabs("MazeTeamtabs", "MazeTeamdivcontainer")
MTsystemTabs.setpersist(true)
MTsystemTabs.setselectedClassTarget("link") //"link" or "linkparent"
MTsystemTabs.init()

</script>

The core javascript which actually makes the whole AJAX Tabs system work in the first place is here:
http://www.dynamicdrive.com/dynamici...bs/ajaxtabs.js



I am simply requiring a way to enable switching to and from the "new" tab that is dynamically created without the content being loaded seperate of the page... and if this isn't possible, a way of closing the "new" tab when another tab is selected.

Thanks in advance.