单页javascript中的多个选项卡

单页javascript中的多个选项卡,javascript,tabs,Javascript,Tabs,我正在编写一个我在Uni设计的网站,除了一个需要两组选项卡菜单的页面外,它大部分都是完整的 第一个可以使用我找到的一些JavaScript完美地工作,但第二个无法工作。我知道我需要更改JS中的一些内容,但我真的很了解它,我不确定要更改哪些内容。我试过用它做实验,但它真的让我很沮丧 如果有人能向我解释我需要改变什么以及为什么它不起作用,那将是令人惊讶的,因为我宁愿学习JS并知道我做错了什么,而不仅仅是复制和粘贴东西。多谢各位 以下是HTML: <ul id="tabs">

我正在编写一个我在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>

配料
  • 4杯纯面粉
  • 1/2汤匙盐
  • 2茶匙干酵母
  • 1/2汤匙糖
  • 1/2品脱温水
  • 1半杯猪油
  • 2汤匙碎方糖
  • 肉豆蔻、肉桂和全香料各1/4汤匙
  • 1汤匙醋栗
  • 1汤匙苏丹糖
    • 方法
    • 1。用半汤匙糖和半品脱温水将酵母打成奶油。
    • 二,。加入和盐混合的面粉,揉成面团。放在温暖的地方,直到尺寸加倍
    • 三,。敲回来,滚成1/2英寸厚的矩形。点上猪油和糖
    • 四,。把面团折成3份,然后卷起来。再点上猪油和糖,再滚两次
    • 五,。在最后一次轧制时,撒上葡萄干和苏丹娜,然后轧制成一个润滑良好的锡罐。
    • 烘烤

      220摄氏度直到金黄色

    配料
  • 坚果
  • 种子
  • 猪油
  • 面包

    • 方法
    • 1。把猪油融化成液体。让猪油冷却到糊状状态。
    • 二,。加入坚果、种子、熟培根或任何你认为食虫鸟类可能喜欢的东西
    • 三,。把混合物做成球
    • 四,。将球放在网袋内或嵌入绳子以便悬挂
    • 五,。把球放进冰箱里凝固。

    配料
  • 3/4茶匙盐
  • 1 1/2 c筛过的通用面粉
  • 1/2 c猪油
  • 2 1/2汤匙水
    • 方法
    • 1。在面粉中加入盐,筛入搅拌碗
    • 二,。加入猪油,猪油不要冷冻,并与糕点搅拌机混合,直到混合物类似于正餐
    • 三,。把水洒在面粉表面
    • 四,。用叉子将混合物混合在一起,轻轻搅拌
    • 五,。面团会粘在一起,应该足够干燥,可以处理。
    • 烘烤

      425摄氏度
      12-15分钟

    配料
  • 1/8磅新鲜蛋糕酵母
  • 2.5摄氏度冷水
  • 1/2茶匙盐
  • 一个鸡蛋
  • 1/2摄氏度温水
  • 1 c糖
  • 1/3 c温热猪油面粉变硬
    • 方法
    • 1。将酵母溶解在温水中,备用
    • 二,。将冷水、糖、盐、猪油和鸡蛋搅拌均匀
    • 三,。将酵母和筛过的面粉加入液体混合物中,直到变硬。
    • 4。揉面团直到有弹性
    • 五,。让面团上升两次,每次都打下去。最后一次滚成圆面包大小的球。让我们最后一次站起来。
    • 烘烤

      350摄氏度持续20分钟

    配料
  • 一个小的塑料碟形平底锅
  • 一罐碱液
  • 3磅猪油
  • 塑料手套
    • 方法
    • 1。将3杯冷水倒入平底锅中
    • 二,。一次加入一点碱液,搅拌
    • 三,。让它冷却至少一个小时
    • 四,。将碱液和猪油一起倒入洗碗盘中。猪油会融化的。彻底搅拌,至少直到看起来像厚布丁。5.让它凝固到第二天早上,然后切成条状。几天后情况会变得更糟

    以下是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 );
        }
    
    var tabLinks=new Array();
    var contentDivs=新数组();
    onload=函数init(){
    //从页面抓取选项卡链接和内容div
    var tabListItems=document.getElementById('tabs').childNodes;
    对于(变量i=0;i