sixvodkashots Posted March 16, 2005 Share Posted March 16, 2005 Hey Been looking for a while, but not found a very simple script to do this. An example of what i am looking for can be found on the dabs website. LINK: http://www.dabs.com/uk/productView.htm?quicklinx=2RYW&mc=3 If you look to the right of the page where it has the tabs, Description. Features, Specification and Accessories. When you click on one of the links, the current text is hidden and the next text is shown. They have not used i-frames I have tried to work out how they have done it but not got very far. Any help or advice would be most helpful Lee :) Link to comment Share on other sites More sharing options...
0 dmkov.ru Posted March 16, 2005 Share Posted March 16, 2005 i have cuted it from this page <html> <head> ?<style> ? ?.productdetail_tabs { BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; DISPLAY: none; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 400px; BORDER-BOTTOM: 1px solid; HEIGHT: 200px; BACKGROUND-COLOR: seashell } ?</style> </head> <body><br><br> <table align=center cellspacing=0 cellpadding=0 border=3> ?<tr height=10> ? ?<td align=left style="DISPLAY: block; CURSOR: hand" onclick=makemarketingvisible();>text 1</td> ? ?<td align=left style="DISPLAY: block; CURSOR: hand" onclick=makefeaturesvisible();>text 2</td> ? ?<td align=left style="DISPLAY: block; CURSOR: hand" onclick=makespecvisible();>text 3</td> ? ?<td align=left style="DISPLAY: block; CURSOR: hand" onclick=makeaccvisible();>text 4</td> ?</tr> ?<tr> ? ?<td align=left width="100%" colspan=4> ? ? ?<DIV class=productdetail_tabs id=divMarketing ? ? ms_positioning="FlowLayout">any html text 1</DIV> ? ? ?<DIV class=productdetail_tabs id=divFeatures ? ? ?ms_positioning="FlowLayout">any html text 2</DIV> ? ? ?<DIV class=productdetail_tabs id=divSpecification ms_positioning="FlowLayout">any html text 3</DIV> ? ? ?<DIV class=productdetail_tabs id=divAccessories ? ms_positioning="FlowLayout">any html text 4</DIV> ? ?</td> ?</tr> </table> <script language='JavaScript'> document.getElementById("divMarketing").style.display='block'; function makemarketingvisible() { ?document.getElementById("divFeatures").style.display='none'; ?document.getElementById("divMarketing").style.display='block'; ?document.getElementById("divSpecification").style.display='none'; ?document.getElementById("divAccessories").style.display='none'; } function makefeaturesvisible() { ?document.getElementById("divMarketing").style.display='none'; ?document.getElementById("divFeatures").style.display='block'; ?document.getElementById("divSpecification").style.display='none'; ?document.getElementById("divAccessories").style.display='none'; } function makespecvisible() { ?document.getElementById("divFeatures").style.display='none'; ?document.getElementById("divMarketing").style.display='none'; ?document.getElementById("divSpecification").style.display='block'; ?document.getElementById("divAccessories").style.display='none'; } function makeaccvisible() { ?document.getElementById("divFeatures").style.display='none'; ?document.getElementById("divMarketing").style.display='none'; ?document.getElementById("divSpecification").style.display='none'; ?document.getElementById("divAccessories").style.display='block'; } </script> </BODY></HTML> Link to comment Share on other sites More sharing options...
0 sixvodkashots Posted March 16, 2005 Author Share Posted March 16, 2005 Thanks Mate Dont know what I was doing wrong but your code worked first time!! Thanks!! :D Link to comment Share on other sites More sharing options...
0 dmkov.ru Posted March 17, 2005 Share Posted March 17, 2005 u r wellcome :) Link to comment Share on other sites More sharing options...
Question
sixvodkashots
Hey
Been looking for a while, but not found a very simple script to do this.
An example of what i am looking for can be found on the dabs website.
LINK: http://www.dabs.com/uk/productView.htm?quicklinx=2RYW&mc=3
If you look to the right of the page where it has the tabs, Description. Features, Specification and Accessories.
When you click on one of the links, the current text is hidden and the next text is shown. They have not used i-frames
I have tried to work out how they have done it but not got very far.
Any help or advice would be most helpful
Lee :)
Link to comment
Share on other sites
3 answers to this question
Recommended Posts