CODEWITHSUNDEEP
javascript
user2716580
user2716580

Reputation: 1

From data-url attribute value using javascript navigate to the url

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>

Upvotes: 0

Views: 360

Answers (1)

tehsockz
tehsockz

Reputation: 1299

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.

Upvotes: 1

Related Questions