Issue with a vertical tab menu

[Lorne]

I am converting an old frames based web site to use a tab menu but can't solve an issue.  I create a menu based on button images with the code:

<div class="tab">
  <button class="tablinks" onclick="OpenTarget(event, 'Home')" id="defaultOpen"><img alt="Home" src="Images/Home.gif"></button>
There are 9 buttons and each one displays a web page in the tab contents area with code like this:

<div id="Home" class="tabcontent">
  <iframe src="home.htm" style="width: 100%; height: 100%" target="_self"></iframe>
</div>
and I display the web pages with the following scripts taken from this site:

<script>
function OpenTarget(evt, pageName) {
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent.style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks.className = tablinks.className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(pageName).style.display = "block";
  evt.currentTarget.className += " active";
}

Each of the iframe web pages contain links to other pages that display in the contents area as I want and all appears to work except when I try to get back to the initial page (ie Home.htm in the above code for the first button).  It seems that pressing the tab button after a new page has been opened by a link in Home.htm just reloads the new page rather than executing the iframe code to reload the initial Home.htm page.  Even if I go to a new tab and back to the first I get the new page and not the initial one.  The only way to get back to the initial page is to use the browser back button which is not ideal. What do I need to change so that pressing any tab button always displays the initial page referenced by the iframe code rather than any other page that has been loaded by following links in the initial page ?

Thanks in advance for any help you can give me.

[JMRKER]

I am having problems replicating your design.

Do you have a link to the site or can you provide the entire HTML, JS and CSS you are using?

Also, what is the purpose of using and <iframe> tag?  Could you not just link to the site with an <a> tag?

 

[dsonesuk]

Because your code has not used menu code  icon '<>' , the [ i ] (without spaces) within the for loop has been replaced as formatting code for italics.

[Lorne]

14 hours ago, JMRKER said:

I am having problems replicating your design.

Do you have a link to the site or can you provide the entire HTML, JS and CSS you are using?

Also, what is the purpose of using and <iframe> tag?  Could you not just link to the site with an <a> tag?

 

The link to the test site is: https://www.cantab.net/users/bridge.analyser/Bridge/Files/

If you press a link in the contents area of home page (ie not the menu link but the html link in the text of the contents page) like 'print options' it opens the print option page but if you now click the home item in the menu it stays on the print options page.  Also if you go to another page in the menu and back to home it reloads the print options page.

Note the links to download files are not set up on this test page.  If you want to see the original web page using frames go to https://www.cantab.net/users/bridge.analyser/Bridge/

I am using <iframe> because that was the only way I could see to get the tab menu to load a web page in the contents area.

[JMRKER]

Sorry ... I just don't see the problem.  When I click on the left menu items, it appears to go to a different display.

It does not return to the 'print options' page unless I click on that item in the left menu.

I am using the FF browser if that makes a difference (?)  Or you have already fixed the problem (?)

 

[Lorne]

You are not doing what I said in my post.  If you just click the menu buttons it works fine.  It fails if you click a link on the web page that is showing in the contents area to the right of the menu and then try to get back to the original page by clicking a menu button.

[Lorne]

OK, I have given up and removed the links from the pages that appear in the contents area so I have a working site. 

If anybody does know how to create a link in a area contents page that will click a button in the menu I would be grateful for the info as this would improve the usability of my site.  I can write a script in the index page that will click a menu button but that script does not work from any other page, presumably because the scope of other pages does not extend to seeing the code in the menu index page.

[Lorne]

In case anybody else wants to do this I have solved it.  You need to put code at the start of the function OpenTarget that does this:

  if (pageName == "Home"){
    document.getElementById("Home").innerHTML = document.getElementById('Home').innerHTML;
  }else if  … etc for each page where you have links that change the contents of the initial page..