Hey, I haven't started learning js yet, but understand that it is the best way to go to make a tabbed content section. What I want is a navigation bar above the content section, when i click something in the navigation bar, it changes the content to that specific content. IE: It stats on Payment / Shipping and the payment / shipping content, then i click Warranty Policy and it changes the content to the warranty content. I was told that a js that changes which div is being shown would be the easiest for me to do and edit, but i don't know how to go about it. If you know any good tutorials, or free code. I also would like to know how to style it, if it isn't too hard to explain, I know html / css relatively well now. Also, it is for ebay and it must follow this policy: Any help is appreciated. Also if you know a way to do this in pure CSS / HTML I would be glad to learn it and use it since I actually have an understanding of the two languages as opposed to javascript Also, because it is ebay i cannot make use of the <html>, <head> or <body> tags. everything i do must be inside the body tag, so I make a page wrap, if that will change anything. Thanks in advance for any input.
The following code will setup a 3 tabbed panel with some styling and javascript backend. The code is pretty much self explanatory and you should be able to figure it out. If not let me know and I will help you out. <style type="text/css"> .tab{ background:#828282; color:#fff; margin-right:15px; padding:2px 5px; } #content{ background:#f5f5f5; border:1px solid #000; padding:5px } </style> <script type="text/javascript" language="javascript"> function changeTab(num){ switch(num){ case 1: document.getElementById('content1').style.display = ''; document.getElementById('content2').style.display = 'none'; document.getElementById('content3').style.display = 'none'; break; case 2: document.getElementById('content1').style.display = 'none'; document.getElementById('content2').style.display = ''; document.getElementById('content3').style.display = 'none'; break; case 3: document.getElementById('content1').style.display = 'none'; document.getElementById('content2').style.display = 'none'; document.getElementById('content3').style.display = ''; break; } } </script> <div style="width:500px"> <div style="float:left" class="tab" onClick="changeTab(1)">Tab 1</div> <div style="float:left" class="tab" onClick="changeTab(2)">Tab 2</div> <div style="float:left" class="tab" onClick="changeTab(3)">Tab 3</div> <div style="clear:both"></div> <div id="content"> <div id="content1"> Your content for tab 1 here </div> <div id="content2" style="display:none"> Your content for tab 2 here </div> <div id="content3" style="display:none"> Your content for tab 3 here </div> </div> </div> Code (JavaScript, CSS, HTML):
I have edited it with CSS. Thank you very much for the help. Any chance you can help me remove a dotted border that shows up when one of the links is clicked on? Here is the code I have