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

Question

它是一个无序列表，id为"menu“，用于在页面上动态创建菜单。该列表由列表项填充，其中包含指向其他页面的链接，如下所示。使用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。