javascript - 如何使用不同的按钮创建导航列表，以便当我单击按钮时，内容/文本将根据我单击的按钮进行更改？

Question

我是编程新手，所以这是我的基本问题。

我知道如何制作导航列表，但我不知道如何使其发挥作用。例如，假设我的导航列表有 3 个按钮:主页、关于我和联系我。如何使我的网页从这 3 个按钮之间的主页内容更改？？？我的意思是，当我单击“关于”或“联系我”按钮时，如何获得不同的文本/内容？

希望你明白我的意思。一定很简单，但我只是一个初学者。

预先感谢您的帮助!

Answer 1

通常这些“按钮”是链接，它们是使用 anchor 标记( <a> )创建的。要访问的页面由 href 给出标签上的属性，它是一个 URL。 URL 可以是绝对 ( http://stackoverflow.com ) 或相对 ( about.html )。

以下是链接示例:

<a href="about.html">About</a>

当用户单击链接时，浏览器会查看 href并将用户带到该页面。

我建议阅读许多“HTML 入门”书籍和/或网站，以获得更全面的解释。

如果出于某种原因您绝对想使用实际的按钮(而不是样式看起来像按钮的链接)，您可以这样做，但不建议这样做。有两种方法:

1. 将按钮设为 submit按钮并将每个按钮放入其自己的形式中。该按钮将引导用户访问的页面被定义为 action 中的 URL。表单属性:

   <form action="about.html" method="GET">
       <input type="submit" value="About">
   </form>
   

   或

   <form action="about.html" method="GET">
       <button>About</button>
   </form>
   

   (如果您使用 <button> 标签，则可以在按钮上使用富文本。此外，由于 <button> 的默认类型是 submit ，因此您不需要 type="submit" 。)

2. 输入 onclick按钮上的处理程序。我不推荐这样做有几个原因，尤其是如果用户没有启用 JavaScript，它们就不起作用，但这种情况很少见。

   <input type="button" onclick="location = 'about.html'" value="About">
   

   或

   <button type="button" onclick="location = 'about.html'">About</button>