从data-url属性值使用javascript导航到url

Question

这是一个无序列表，其id为“menu”，用于在页面上动态创建菜单。此列表由list-items填充，其中包含指向其他页面的链接，如下所示。使用JavaScript，将事件附加到这些列表项，因此单击它们将导航用户到其相应的页面。

<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>

Answer 1

这看起来像是家庭作业或类似的东西。如果你自己先尝试做这项工作，你会从中得到更多！无论如何，这是一个解决方案（如果你有jQuery并假设data-url应该是相对于域的。）

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

您可能希望在jQuery中阅读.data()。如果你没有jQuery，Using data-* attributes in JavaScript and CSS是一个有用的资源（即使你使用jQuery，还是值得一看）。

如果您不了解事件处理程序（.click(...）的工作原理，您可以看到jQuery docs on .click()。有关事件处理的一般信息，Wikipedia "Event handler"总是很好。

祝你未来的编程项目顺利！ ：）

（而且，严肃地说，先自己尝试一下。它会更有趣。）

P.S。 Here is a demonstration使用您的示例数据。