javascript - 单个页面javascript中的多个选项卡

Question

我正在编写一个我在 Uni 设计的网站，除了一个页面需要两组选项卡菜单外，它大部分是完整的。

第一个使用我发现的一些 JavaScript 完美运行，但我无法让第二个运行。我知道我需要更改 JS 中的一些内容，但我真的很了解它，但我不确定要更改哪些位。我试过试验它，但它真的让我很沮丧。

如果有人可以向我解释我需要更改的内容以及为什么它不起作用，那将是令人惊奇的，因为我宁愿学习 JS 并知道我做错了什么，而不仅仅是复制和粘贴东西。谢谢。

这是 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>

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

感谢任何人能给我的帮助。

Answer 1

与其重新发明轮子，不如jquery UI tabs ？

这是一个非常好的插件，让您能够在您的网络应用程序中使用标签。

看看 documentation - 如果您是 jQuery 新手，this和 this教程可以帮助你。有关教程和文档的完整列表，请参阅 tutorial部分。