Better alternative to an iframe?

Question

I have a page with an iframe to feature the contents of the clicked tab. There are 3 tabs and 1 iframe. The sources of the contents relating to each tab clicked are formatte

Answer 1

You don't need script.

<ul><li><a href="#foo">foo link</a><li><a href="#bar">bar link</a></ul>
<div class="tab" id="foo">foo contents</div>
<div class="tab" id="bar">bar contents</div>

Plus this CSS, in most browsers: .tab:not(:target) { display: none !important; }, which defaults to all content visible if :target isn't supported (any modern browser supports it).

If you're showing content with script, always hide it with script. Let it degrade gracefully if that script doesn't run.

Answer 2

It's probably better to load in the content for each tab into DIVs on the same page and then switch the visibility of each DIV when a tab button is clicked using JavaScript and the CSS display property.

If you can't do that then iframe is probably the best solution. You can make the iframe background transparent, see below:

<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0" allowtransparency="true"></iframe>

You would then need to add the following CSS to the BODY element using:

BODY { Background: transparent; }