创建导航

时间:2017-05-31 11:56:59

标签: javascript jquery

我创建导航但我遇到了一些问题,因为我没有页面的地址所以我应该可以通过其他方式链接到内容。以下是我尝试使用的代码:

$(document).ready(createNav);
function createNav() {

    var navItems = [
        {href: 'http://google.com', text: 'Google'},
        {href: 'http://bing.com', text: 'Bing'},
        {href: 'http://stackoverflow.com', text: 'StackOverflow'}
    ]; // So these addresses are just an example I tried when I wanted to see if the code works

    var navElem = document.createElement("nav"),
        navList = document.createElement("ul"), 
        navItem, navLink;

    navElem.appendChild(navList);

    for (var i = 0; i < navItems.length; i++) {
        navItem = document.createElement("li");
        navLink = document.createElement("a");

        navLink.href = navItems[i].href;
        navLink.innerHTML = navItems[i].text;

        navItem.appendChild(navLink);
        navList.appendChild(navItem);
    }

    navList.children[0].className = "current";

        var place = document.getElementById('first').getElementsByClassName('contentarea')[0];
        place.appendChild(navElem);

};

代码效果很好,但我不知道如何将它用于我的目的。我的HTML文件对于我尝试链接到菜单的内容没有ID。并且有这么多内容,以这种方式这样做是非常不切实际的。

1 个答案:

答案 0 :(得分:2)

以下是代码段:

&#13;
&#13;
$(function() { createMenu(); }); //this is a jQuery shortcut for $(document).ready()

function createMenu() {
	var href, item, list; //href is <a> in the menu, item is <li>, list is <ul>
	var menu = $('<nav><ul></ul></nav>'); //this creates a <nav> with a <ul> child
	var posts = $('#primarycontent .post'); //this selects every class="post" that's a child of id="primarycontent"
	list = menu.find('ul'); //<ul> is selected from within menu and assigned to the list variable
	posts.each(function(n, x) { //this is a function run on every post, n is post index, x is current post
		x = $(x); //converting DOM node to jQuery object
		item = $('<li><a href="#"></a></li>'); //assigning a <li> with a child <a> to item
		href = item.find('a'); //storing a link to child <a> from <li> to the value of href
		href.text(x.find('h4').text()); //setting href text to be equal to the text of the header of the current post
		href.click(function(e) { //adding an event listener to href
			e.preventDefault(); //preventing default link behaviour (going to a URL)
			$('html, body').animate({ //adding an animation to the document
				scrollTop: x.offset().top //scrolling to the top border of the current post
			}, 2000); //animation speed, 2 seconds
		});
		list.append(item); //adding <li> with child <a> to <ul>
	});
	$('#receptmeny .contentarea').eq(0).append(menu); //appending <nav> to the 1st class="contentarea" inside id="receptmeny"
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="receptmeny" class="box">
	<div class="contentarea">
		 <!-- the menu should come here -->
	</div>
</div><!-- Secondary content area end -->
<div id="primarycontent">
	<div class="post">
		<h4>Potatis, att imkoka.</h4>
		<div class="contentarea">
			<p>
				Bast ar att hartill hafva en sarskild bleckkastrull, som ar halig i botten och passar att satta ofver en kokande vattengryta. I denna kastrull lagger man ra, skalad potatis, hvilken da blir kokt fran den andra grytans imma. Men i brist af denna inrattning, sa lagges potatisen i en jarngryta med mycket vatten, att halfkoka, da vattnet afhalles, fint salt pastros; potatisen skakas i grytan tills den ser mjolig ut, hvarefter den, med lock pa, far sta pa varma spiselhallen en bra stund innan den ates. Den bor upplockas varsamt med en sked, ty annars gar den sonder. (Innan den skakas ar bra att afven stro fint socker ofver den.)
			</p>
		</div>
	</div>
	<div class="post">
		<h4>Potatisbullar.</h4>
		<div class="contentarea">
			<p>
				Stor potatis halfkokas och skalas. Da den blifvit val kall, rifves den, men aktas, att inga bitar komma med ibland det rifna. Till 12 decilit. (1 stop) rifven potatis tagas 3 hela agg, nagra skedblad gradde, ett skedblad socker, en tesked salt, litet muskot och 8 rifna bittermandlar; detta arbetas val med handerna, formas sedan i sma runda bullar, hvilka trillas i fint stotta skorpor och stekas gulbruna i flottyr. Serveras till rokt spickeskinka, kott eller stekt sill. Bullarna kunna vara utan agg, men da uteslutes gradden.
			</p>
		</div>
	</div>
	<div class="post">
		<h4>Potatismos</h4>
		<div class="contentarea">
			<p>
				Kokt potatis skalas ocn stotes sa varm den ar i en upphettad gjuten jarnpanna, men blott ett par potatis i sander. Da sa mycket potatis ar stott, som man onskar, ilagges en sked kallt smor och 2 a 3 skedar sot gradde, litet socker och muskotblomma efter smak; pannan sattes ofver elden att upphettas under flitig stotning ett par minuter, hvarefter moset brerdes pa en varm karott och ates med kottbullar eller spickemat.
			</p>
		</div>
	</div>
	<div class="post">
		<h4>Potatiskaka.</h4>
		<div class="contentarea">
			<p>
				Potatis, att imkoka.

				Bast ar att hartill hafva en sarskild bleckkastrull, som ar halig i botten och passar att satta ofver en kokande vattengryta. I denna kastrull lagger man ra, skalad potatis, hvilken da blir kokt fran den andra grytans imma. Men i brist af denna inrattning, sa lagges potatisen i en jarngryta med mycket vatten, att halfkoka, da vattnet afhalles, fint salt pastros; potatisen skakas i grytan tills den ser mjolig ut, hvarefter den, med lock pa, far sta pa varma spiselhallen en bra stund innan den ates. Den bor upplockas varsamt med en sked, ty annars gar den sonder. (Innan den skakas ar bra att afven stro fint socker ofver den.)
				Potatisbullar.

				Stor potatis halfkokas och skalas. Da den blifvit val kall, rifves den, men aktas, att inga bitar komma med ibland det rifna. Till 12 decilit. (1 stop) rifven potatis tagas 3 hela agg, nagra skedblad gradde, ett skedblad socker, en tesked salt, litet muskot och 8 rifna bittermandlar; detta arbetas val med handerna, formas sedan i sma runda bullar, hvilka trillas i fint stotta skorpor och stekas gulbruna i flottyr. Serveras till rokt spickeskinka, kott eller stekt sill. Bullarna kunna vara utan agg, men da uteslutes gradden.
				Potatismos

				Kokt potatis skalas ocn stotes sa varm den ar i en upphettad gjuten jarnpanna, men blott ett par potatis i sander. Da sa mycket potatis ar stott, som man onskar, ilagges en sked kallt smor och 2 a 3 skedar sot gradde, litet socker och muskotblomma efter smak; pannan sattes ofver elden att upphettas under flitig stotning ett par minuter, hvarefter moset brerdes pa en varm karott och ates med kottbullar eller spickemat.
				Potatiskaka.

				12 decilit. (1 stop) rifven potatis blandas med 3 skedblad fint stotta skorpor, tva skedar socker, litet muskot, peppar, salt, 45 centilit. (1 halft kvarter) gradde och tre hela agg, samt lagges i en med smor smord form, klappas tatt ihop och insattes i en bra nog varm ugn att sta en halftimme, men ofvertackes med en stekpanna, om den blir for mork. Denna kaka kan uppstjalpas och atas varm, eller ock, sedan den blifvit val kall, skaras i tjocka skifvor, som hvalfvas i hvetemjol och stekas gulbruna i flottyr. Ates med salt kott eller kottkorf.
			</p>
		</div>
	</div>
	<div class="post">
		<h4>Brynt potatis.</h4>
		<div class="contentarea">
			<p>
				Nyss kokt potatis, antingen mycket sma, da den stekes hel, eller ock stor, da den skares i skifvor, brynes i smor och socker, om den skall vara ratt fin. Men i hvardagslag kan tagas flaskflott samt ett skedblad brun sirap. Med en munkspade vandes potatisen ofta, att den ej brannes eller gar sonder; da den blifvit nara stekt, ofverstros ett skedblad fint stotta skorpor.
			</p>
		</div>
	</div>
	<div class="post">
		<h4>Brynt potatis pa annat satt</h4>
		<div class="contentarea">
			<p>
				Man skalar ra potatis, skar den i skifvor och lagger den i en gjuten jarnpanna med ett stycke smor och tatt lock ofver, hvarefter den insattes i ugnen men ses ofta efter, att den ej brannes. Nar potatisen borjar se brun ut, palagges en sked brun sirap; den insattes ater i ugnen att bli mor, da litet sot gradde sedan slas ofver och omskakas, hvarefter den ates till stekt flask eller oxstek. Sma, kokt, skalad potatis doppas i agghvitskum och trillas i finstotta skorpor, blandade med socker och kanel, samt stekas gulbruna i smor.
			</p>
		</div>
	</div>
	<div class="post">
		<h4>Potatis, stufvad.</h4>
		<div class="contentarea">
			<p>
				3 lit. (1 stop) sot mjolk uppkokas, i den lagges nyss kokad, skalad och i skifvor skuren potatis vid pass 1 lit. (1 stop), en sked smor, en tesked socker och litet salt, under bestandig omroring, att koka sakta, dock ej sa att potatisen gar sonder, utan man ror blott med en tunn stor trasked fran bradden och botten af grytan, att det ej lagger sig vid. Nar sasen ar simmig, aflyftes grytan och potatisen ates genast till rokt spickekott eller salt, kokt far- eller oxkott.
			</p>
		</div>
	</div>
</div>
&#13;
&#13;
&#13;

我尽我所能解释了每一步。我希望这会对你有所帮助。