Tab Content open specific tab from other page.

[fastcarsspeed]

1) Script Title: Tab Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

3) Describe problem:

The javascript href does not work on opening a specific tab if you are on another page without the tab content. Is there any way to do this?

[ddadmin]

If the link to specify which tab to be selected is on another page, you can't just do:

<p><b><a href="javascript: expandtab('maintab', 3)">Click here to select 4th tab</a></b></p>

Instead, you need to pass some info via the URL to the target page containing the tab content to tell it which tab to be selected. You can do this with a link similar to:

<p><b><a href="target.htm?selectedtab=3">To to target page and select 4th tab within tab content</a></b></p>

The "3" here indicates you wish the 4th tab to be selected. Then on the target page containing the tab content, after initializing it, add the below code in red:

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")

var param=window.location.href.match(/selectedtab=(\d+)/i)
if (RegExp.$1!="")
expandtab('maintab', RegExp.$1)
</script>

This will cause the 4th tab to be selected whenever users visit target.htm via the mentioned link on another page.

[fastcarsspeed]

Thank you for the approach.

I was able to put the javascript command inside the OnLoad event of the page and it is able to open the right tab.

[fastcarsspeed]

My onload started acting up. I tried this little script and it still didnt work. Any idea?

If the link to specify which tab to be selected is on another page, you can't just do:

<p><b><a href="javascript: expandtab('maintab', 3)">Click here to select 4th tab</a></b></p>

Instead, you need to pass some info via the URL to the target page containing the tab content to tell it which tab to be selected. You can do this with a link similar to:

<p><b><a href="target.htm?selectedtab=3">To to target page and select 4th tab within tab content</a></b></p>

The "3" here indicates you wish the 4th tab to be selected. Then on the target page containing the tab content, after initializing it, add the below code in red:

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")

var param=window.location.href.match(/selectedtab=(\d+)/i)
if (RegExp.$1!="")
expandtab('maintab', RegExp.$1)
</script>

This will cause the 4th tab to be selected whenever users visit target.htm via the mentioned link on another page.

[fastcarsspeed]

Ok now this is where I have an issue. This is all built in .net. Im using a formview on the second tab and a grid on the first tab that will open the second tab to display more data. But with this script in place it refreshes the page and nullifies my open other tab script. same thing goes when someone goes to edit the formview or create a new it defaults back to the selected tab from the url string. gotta be a way around this darnit.

[ddadmin]

Hmm you're going to have to elaborate. Are you having a problem with the code I posted specifically, or the script in general conflicting with another tab script? Maybe a link to the problem will help.

[manga101]

If the link to specify which tab to be selected is on another page, you can't just do:

<p><b><a href="javascript: expandtab('maintab', 3)">Click here to select 4th tab</a></b></p>

Instead, you need to pass some info via the URL to the target page containing the tab content to tell it which tab to be selected. You can do this with a link similar to:

<p><b><a href="target.htm?selectedtab=3">To to target page and select 4th tab within tab content</a></b></p>

The "3" here indicates you wish the 4th tab to be selected. Then on the target page containing the tab content, after initializing it, add the below code in red:

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")

var param=window.location.href.match(/selectedtab=(\d+)/i)
if (RegExp.$1!="")
expandtab('maintab', RegExp.$1)
</script>

This will cause the 4th tab to be selected whenever users visit target.htm via the mentioned link on another page.

i tried the above code and it doesn't seem to work. Am I missing something?

here is my code:

on the home page i have a link to go into the portfolio page.

from the home page:

<a href="portfolio.html?selectedtab=3">Web Portfolio</a>


On the Portfolio page, here are my tab:

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Business Card</a></li>
<li><a href="#" rel="tcontent2">Print</a></li>
<li><a href="#" rel="tcontent3">Web</a></li>
<li><a href="#" rel="tcontent4">Motion</a></li>
<li><a href="#" rel="tcontent5">Experimental</a></li>
</ul>

my divs for each content is setup like this:

<div id="tcontent1" class="tabcontent"> </div>
<div id="tcontent2" class="tabcontent"> </div>
<div id="tcontent3" class="tabcontent"> </div>
<div id="tcontent4" class="tabcontent"> </div>
<div id="tcontent5" class="tabcontent"> </div>


My initialized code at the bottom:



<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")

var param=window.location.href.match(/selectedtab=(\d+)/i)
if (RegExp.$1!="")
expandtab('maintab', RegExp.$1)

</script>


the error i'm getting is : "PAGE NOT FOUND" when clicking the link from the home page.

the JS files is on both pages.

thx for the help

[ddadmin]

Are you saying clicking on the link to portfolio.html returns a page not found? In other words, this code:

<a href="portfolio.html?selectedtab=3">Web Portfolio</a>

If so, this has nothing to do with the script per say. Is the link correct? If so, does removing the "?..." part fix the problem?

[manga101]

Are you saying clicking on the link to portfolio.html returns a page not found? In other words, this code:

<a href="portfolio.html?selectedtab=3">Web Portfolio</a>

If so, this has nothing to do with the script per say. Is the link correct? If so, does removing the "?..." part fix the problem?

yes the link works fine without the ? part.

adding the "?..." i get the "page not found"


EDIT: ahhhh fix the problem, user error on my part, my apology , it was a typo.