Log in

View Full Version : How do I switch content like this?


DarkArcher
02-29-2008, 04:55 PM
Hi, thank goodness I found this forum, I doubt the other online html forums will be able to understand the concept of this characteristic I'm trying to impose on my website.

http://img159.imageshack.us/img159/8868/questiontn4.th.png (http://img159.imageshack.us/my.php?image=questiontn4.png)

Above is the feature I want. What I want to do is to click a tab and content is switched just like how www.microsoft.com does their navigation on the main page.

In addition, I want to be able to have the ability to switch content twice. As shown in the picture pg 1, I click the furthermost link to the left which switches content and displays further tabs for me to click to switch content within the frame again.

At the same time, the small vertical lines have to move along with what ever is clicked. The tab last clicked should be remembered and the vertical lines show stay beside it even if the mouse is not hovering the tab, just like the microsoft website.

Now that sounds like alot, I hope it's not too hard to do. Can anyone provide me with a comprehensive code for this?

I've read switching content II script on dynamic drive, but it was really hard to understand and let alone customise it to my needs. I hope you guys can help, thanks so much. =)

DarkArcher
Medyman
03-02-2008, 05:34 PM
1. You should start with the Tab Content Script (http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm)

2. To add the "vertical lines", simply change the CSS of the "selected" tab to have borders on the left and right.

3. For one tab to reveal further tabs, you should be able to do this with an onClick event on that tab.

Add the following between your <head> and </head> tags


<script type="text/javascript">
<!--
function show(id) {
var a = document.getElementById(id);
if(a.style.display == 'block')
a.style.display = 'none';
else
a.style.display = 'block';
}
//-->
</script>


Add this to the link (tab).
<a href="#" rel="your_tab_id" onClick="show('div_id')">Tab 4</a>


In this case, 'div_id' is the id that you'll have to assign to a div containing another instance of the Tab script.

Lastly, add a css property to "div_id" of display:none;


OR

this may be of use: http://www.cssplay.co.uk/menus/pro_droptab.html