单个页面中的多个标签页

Question

I am programming a site I designed at Uni, it's mostly complete apart from one page which needs two sets of tab menu's.

The first works perfectly using some JavaScript I found but I cannot get the second to work. I know I need to change some stuff in the JS but I'm really knew to it and i'm not sure what bits to change. I've tried experimenting with it but it's really frustrating me.

If someone could explain to me what I need to change and why it's not working that would be amazing cause i'd rather learn the JS and know what i've done wrong than just copy and paste stuff. Thank you.

Here is the HTML:

    <ul id="tabs">
      <li><a href="#one">Lardy Cake</a></li>
      <li><a href="#two">Birds Fatty Balls</a></li>
      <li><a href="#three">Pastry</a></li><br/>
    </ul>

<ul id="tabs2">
 <li><a href="#four">Lard Buns</a></li>

  <li><a href="#five">Soap</a></li>

  <li><a href="#six">Buttermilk Biscuits</a></li>

</ul>

<div id="one" class="tabContent">
<p><img src="images/recipes/lardycaketitle.png"class="lardytitle" ></a></p>
 <p><img src="images/recipes/lardycake.png"class="lardypic"></a></p>
<ul class="ing" ><li><b>INGREDIENTS</b></li>

<li>4 cups plain flour </li>
<li>1/2 tbsp salt</li> 
<li>2 tsp dried yeast</li>
<li>1/2 tbsp sugar</li> 
<li>1/2 pint warm water</li>
<li> 1 1/2 cups lard</li>
<li>2 tbsp crushed sugar cubes</li> 
<li>1/4 tbsp each nutmeg, cinnamon and allspice</li> 
<li>1 tbsp currants</li>
<li> 1 tbsp sultanas</li></p>
</ul>
<ul class="method"><li><b>METHOD</b></li>
<p><li>1. Cream the yeast with half a tablespoon of sugar and half a pint of warm water.</li> 
<li>2. Add to the flour mixed with the salt and form into a dough and knead. Put in a warm place until doubled in size. </li>
<li>3. Knock back and roll out into a rectangle 1/2 an inch thick. Dot with lard and sugar. </li>
<li>4. Fold the dough into 3 and roll. Dot with lard and sugar again and roll out twice more. </li>
<li>5. At the last rolling, sprinkle with currants and sultanas and roll to fit a well-greased tin.</li></p>

<p><b>BAKE</b></p>
<p>220 degrees Celsius until golden brown.</p>
</ul>

</div>


<div id="two" class="tabContent">
<p><img src="images/recipes/fattyballstitle.png"class="lardytitle" ></a></p>
 <p><img src="images/recipes/fattyballs.png" class="fattypic"></a></p>
<ul class="ing" ><li><b>INGREDIENTS</b></li>

<li>Nuts </li>
<li>Seeds</li> 
<li>Lard</li>
<li>Bread</li> 
</p>
</ul>
<ul class="method"><li><b>METHOD</b></li>
<p><li>1. Melt lard to liquid. Allow the lard to cool down to a pasty state.</li> 
<li>2. Mix in nuts, seeds, cooked bacon or anything else you think insect-eating birds might like. </li>
<li>3. Form the mixture into a ball </li>
<li>4. Place the ball inside a mesh bag or imbed a string for hanging.</li>
<li>5. Put the ball into the freezer to solidify.</li></p>


</ul>

</div>
<div id="three" class="tabContent">
<p><img src="images/recipes/pastrytitle.png"class="lardytitle" ></a></p>
 <p><img src="images/recipes/pastry.png" class="pastrypic"></a></p>
<ul class="ing" ><li><b>INGREDIENTS</b></li>

<li>3/4 tsp salt</li>
<li> 1 1/2 c sifted all-purpose flour</li>
<li> 1/2 c lard </li>
<li>2 1/2 tbsp water</li>
</p>
</ul>
<ul class="method"><li><b>METHOD</b></li>
<p><li>1. Add salt to flour and sift into a mixing bowl. </li>
<li>2. Add lard, which is not chilled and blend with pastry blender until the mixture resembles course meal.</li>
<li>3. Sprinkle the water over the surface of the flour. </li>
<li>4. Mix gently by blending the mixture together with a fork.</li>
<li> 5. Dough will hold together and should be dry enough to handle.</li></p>

<p><b>BAKE</b></p>
<p>425 degrees Celsius <br/>for 12-15 minutes.</p>
</ul>


</div>
</div>
<div id="four" class="tabContent2">
<p><img src="images/recipes/bunstitle.png"class="bunstitle" ></a></p>
 <p><img src="images/recipes/buns.png"class="bunspic"></a></p>
<ul class="ing2" ><li><b>INGREDIENTS</b></li>
<li>1/8 lb fresh cake yeast </li>
<li>2 1/2 c cold water </li>
<li>1/2 tsp salt</li> 
<li>1 egg</li>
<li>1/2 c warm water </li>
<li>1 c sugar</li>
<li> 1/3 c warm lard Flour to stiffen</li>
</ul>
<ul class="method2"><li><b>METHOD</b></li>
<p><li>1. Dissolve yeast in warm water and set aside. </li>
<li>2. Mix together cold water, sugar, salt, lard, and egg, beat well.</li>
<li>3. Add yeast and sifted flour to liquid mixture until stiff.</li> 4. Knead dough until elastic. </li>
<li>5. Let dough rise twice and beat down each time. Last time roll into bun size balls. Let rise last time.</li></p>

<p><b>BAKE</b></p>
<p>350 degrees Celsius for 20 minutes.</p>
</ul>
</div>


  <div id="five" class="tabContent2">
<p><img src="images/recipes/soaptitle.png"class="bunstitle" ></a></p>
 <p><img src="images/recipes/soap.png"class="bunspic"></a></p>
<ul class="ing2" ><li><b>INGREDIENTS</b></li>
<li>A small plastic dishpan Saucepan </li>
<li>1 can of lye</li>
<li> 3 pounds of lard </li>
<li>Plastic gloves</li>
</ul>
<ul class="method2"><li><b>METHOD</b></li>
<p><li>1. Pour 3 cups of cold water into a pan. </li>
<li>2. Add the lye a bit at a time, stirring throughout.</li>
<li>3. Let cool at least one hour. </li>
<li>4. Pour the lye solution into the dishpan with the lard. The lard will melt. Mix thoroughly, at least until it looks like thick pudding. 5. Let it set until the next morning, then cut it into bars. It will get harder after a few days.</p></li>
</ul>
</div>
</div>

And here is the JS:

 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 );
    }

Thank you for any help anyone can give me.

Answer 1

Instead of reinventing the wheel, what about jquery UI tabs ?

It's a really nice plugin which gives you the ability to use tabs in your web app.

Have a look at the documentation - and if you're new to jQuery, this and this tutorial may help you. For a complete list of tutorials and the documentation see the tutorial section.