Soumikbhat
Baseband Member
- Messages
- 29
See this is what i want to achieve in my webpage....
There will be three tabs side by side with names T1 T2 and T3 in the header.
Below this tab-bar, will be a div element with some text (let's call that element "Text-box")
I want to change the text on that div element without reloading the page when the tabs are clicked. For example when the user opens the page there will be some text in the div-element like "welcome". Then when the user clicks T1 tab, the text in the div element will change to "This is tab 1", when the user clicks T2 tab, the text will change to "This is tab 2"....like this. I want to achieve all this without having to reload the page everytime the user clicks a tab.
Now I don't know much coding, so I'll be glad if someone comes up with the full code (html,jss etc whatever needed).
From a Google search I got this code:-
The problem is that I'd like to use this entire thing as an element in a table, and in that case the above code causes problems...please suggest a solution.
So either pls give me a different code or pls suggest remedies to make it usable as table elements. Screenshot when used as a table element attached.
There will be three tabs side by side with names T1 T2 and T3 in the header.
Below this tab-bar, will be a div element with some text (let's call that element "Text-box")
I want to change the text on that div element without reloading the page when the tabs are clicked. For example when the user opens the page there will be some text in the div-element like "welcome". Then when the user clicks T1 tab, the text in the div element will change to "This is tab 1", when the user clicks T2 tab, the text will change to "This is tab 2"....like this. I want to achieve all this without having to reload the page everytime the user clicks a tab.
Now I don't know much coding, so I'll be glad if someone comes up with the full code (html,jss etc whatever needed).
From a Google search I got this code:-
HTML:
HTML Code:
<html>
<head>
<style type="text/css">
div#ALL { position: relative; width:80%; height: 400px; margin-top: 30px; }
div.tabBody { position: absolute; top: 0px; left: 0px;
width: 95%; height: 75%;
z-index: 1;
background-color: yellow; border: solid brown 2px;
padding: 20px;
}
div.tabHead { position: absolute; top: -20px; left: 10px;
width: 200px; height: 22px;
z-index: 2;
text-align: center;
background-color: lightyellow; border: solid brown 2px; border-bottom: none;
}
</style>
<script type="text/javascript">
function front(which)
{
for ( var t = 1; t < 9999; ++t )
{
var dv = document.getElementById("TABBODY"+t);
if ( dv == null ) return;
dv.style.zIndex = t == which ? 5 : 1;
var tab = document.getElementById("TAB"+t);
tab.style.backgroundColor = t == which ? "yellow" : "lightyellow";
tab.style.zIndex = t == which ? 7 : 1;
}
}
</script>
<body onload="front(1);">
Stuff at the top of the page.
<br/><br/>
<div id="ALL">
<div id="TAB1" class="tabHead" onclick="front(1);"><strong>t1</strong></div>
<div id="TAB2" class="tabHead" onclick="front(2);" style="left: 226px;"><strong>T2</strong></div>
<div id="TAB3" class="tabHead" onclick="front(3);" style="left: 452px;"><strong>T3</strong></div>
<div id="TAB4" class="tabHead" onclick="front(4);" style="left: 678px;"><strong>T4</strong></div>
<div id="TABBODY1" class="tabBody">
t1
text1
</div>
<div id="TABBODY2" class="tabBody">
<p>text2
</div>
<div id="TABBODY3" class="tabBody">
text3
</div>
<div id="TABBODY4" class="tabBody">
Text4
</div>
</div>
</body>
</html>So either pls give me a different code or pls suggest remedies to make it usable as table elements. Screenshot when used as a table element attached.
