2

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

谢谢你任何人都可以给我的帮助。

4

1 回答 1

0

而不是重新发明轮子,jquery UI 选项卡呢?

这是一个非常好的插件,它使您能够在 Web 应用程序中使用选项卡。

查看文档- 如果您是 jQuery 新手,教程和 教程可能会对您有所帮助。有关教程和文档的完整列表,请参阅教程部分。

于 2012-09-26T14:18:31.077 回答