1 Topic by Rod

  • Rod
  • Senior Member
  • Offline
  • From: Rouen, France
  • Registered: 2004-07-19
  • Posts: 591

Topic: A script with only One TABS system ... how to modify to have several ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
#navlist {
    padding: 3px 0;
    margin-left: 0;
    border-bottom: 1px solid #778;
    font: bold 12px Verdana, sans-serif;
}
#navlist li {
    list-style: none;
    margin: 0;
    display: inline;
}

#navlist li a, #navlist li a.normal {
    padding: 2px 0.5em 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #778;
    border-bottom: none;
    background: #DDE;
    text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover {
    color: #000;
    background: #AAE;
    border-color: #227;
}

#navlist li a.current {
    background: white;
    border-bottom: 1px solid white;
}
</style>
</head>
<body>
<script language="javascript">
function clearAllTabs() {
    for(k=1;k<=5;k++) {

        document.getElementById('link'+k).className='normal';
        document.getElementById('tab'+k).style.display='none';
    }
}
function selectTab(id) {
    clearAllTabs();
    document.getElementById('link'+id).className='current';
    document.getElementById('tab'+id).style.display='inline';
}
</script>

<div id="navcontainer">
    <ul id="navlist">
        <li><a id="link1" href="javascript:selectTab('1')" class="current">Item one</a></li>
        <li><a id="link2" href="javascript:selectTab('2')">Item two</a></li>
        <li><a id="link3" href="javascript:selectTab('3')">Item three</a></li>
        <li><a id="link4" href="javascript:selectTab('4')">Item four</a></li>
        <li><a id="link5" href="javascript:selectTab('5')">Item five</a></li>
    </ul>
</div>

<div id="content">
    <div id="tab1">
        <p>Tab 1 content</p>
    </div>

    <div id="tab2" style="display: none">
        <p>Tab 2 content</p>
    </div>

    <div id="tab3" style="display: none">
        <p>Tab 3 content</p>
    </div>

    <div id="tab4" style="display: none">
        <p>Tab 4 content</p>
    </div>

    <div id="tab5" style="display: none">
        <p>Tab 5 content</p>
    </div>
</div>



</body>
</html>

I love this script !!!! Very small, powerful ... but my question is ... I know where change the variables ... but which are they ? I would like to have as many TABS systems I want on my page ... if someone has the answer ... smile

http://www.sortons.net
http://www.fantasya.net

Rod's Website