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部分。

单页javascript中的多个标签

1 个答案: