0

It is an unordered list with id of "menu" that is used to dynamically create menus on a page. This list is populated by list-items that contain links to other pages as shown below. using JavaScript, attach events to these list-items so clicking them will navigate the user to its corresponding page.

<ul id="menu">
    <li data-url="home.html">Home</li>
    <li data-url="about.html">About</li>
    <li data-url="contact.html">Contact</li>
</ul>
1
  • OK. Do you have problem with this statement? Looks relatively normal - if you need spelling check or grammar suggestions - this is wrong place. Show your current code that you have problem with to be valid question here. Commented Jan 19, 2014 at 5:42

1 Answer 1

1

This looks like a homework assignment or something of that sort. You'll get a lot more out of it if you try to do the work yourself, first! Regardless, here's a solution (if you have jQuery and assuming that the data-urls are supposed to be relative to the domain).

$( '#menu li' ).click( function () {
    window.location.href = '/' + $( this ).data( 'url' );
} );

You'll probably want to read about .data() in jQuery. If you don't have jQuery, Using data-* attributes in JavaScript and CSS is a useful resource (and even if you do use jQuery, still worth a look).

If you don't understand how the event handler (.click(...) works, you can see jQuery docs on .click(). For some information about event handling in general, Wikipedia "Event handler" is always good.

Good luck with your future programming projects! :)

(And, seriously, try it yourself first. It's so much more fun.)

P.S. Here is a demonstration using your example data.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.