Tabbladen op index

Hay

Wij zijn nu bezig voor ons forum aan de tabbladen van deze tutorial. Zo zouden wij het ook graag willen hebben, maar als wij dat proberen, krijgen we dit Hoe kunnen we dit oplossen?

2de vraag hoort hier niet helemaal te staan, maar heeft wel te maken met de 1ste vraag. Hoe krijgen wij die code op de index pagina?

Ik zie niet wat het probleem is
Je kunt de code op de indexpagina krijgen door hem in te vullen in:
Bericht op de indexpagina.
Deze is te vinden in: Display>>>Index>>>Algemeen.

Probeer dit maar eens in uit :3
Dan doet hij het beter, wil je de tabs net zo lang hebben als het stukje van het tekst vak, dan moet ik even kijken in mijn code die ik daar op had aangepast

En wat VJ zegt, die hele code daar neer zetten :3

Code:

<ul id="tabs">
<li><a href="#one">Welkom</a></li>
<li><a href="#two">Het Plot</a></li>
<li><a href="#three">De Groepen</a></li>
<li><a href="#four">Het Seizoen</a></li>
<li><a href="#five">Het Team</a></li></ul><div id="one" class="tabContent">hurhurhurhruhruhruhrurhurhrurhrurhurhrurhrurhru</div><div id="two" class="tabContent">oooooooooooo</div><div id="three" class="tabContent">mmmmmmmmmmmm</div><div id="four" class="tabContent">4412353</div><div id="five" class="tabContent">isedugfsduifgsdh
</div>

<style>
ul#tabs {
 font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
 font-size: 1.2em;
 list-style-type: none;
 margin: 10px 10px 0 0;
 padding: 0;
 width: 570px;
}

ul#tabs li {
 float: left;
 padding: 0;
 margin: 0 2px 0 0;
}

ul#tabs li a {
 color: Red;
 margin: 0px;
 padding:5px 20px;
 background-color: Grey;
 border-top: 6px Black solid;
 display: block;
}

ul#tabs li a:hover {
 color: White;
 text-decoration: none;
}

ul#tabs li a.selected {
 color: #B5AD74;
 background-color: Black;
 border-top: 3px Grey solid;
 border-bottom: 3px Grey solid;
}

div.tabContent {
 width: 570px;
 clear: left;
 border: 1px Black solid;
 padding: 10px;
 margin: 0;
}

div.tabContent.hide {
 display: none;
}</style>

<script>
var tabLinks = new Array();
    var contentDivs = new Array();

    onload = function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }</script>