如何创建不同的按钮导航列表，所以当我点击按钮的内容/文本将根据我点击按钮的变化

How to create nav list with different buttons so when I click on the button the content/text will change according to the button I clicked?

本文关键字：按钮 变化 文本 创建 何创建 列表 导航      更新时间：2023-09-26

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

我知道如何制作导航列表，但我不知道如何使它发挥作用。例如，假设我的导航列表有3个按钮:Home, About和Contact Me。我如何使我的网页改变从这3个按钮之间的主页内容??我的意思是我如何得到不同的文本/内容，当我点击关于或联系我按钮?

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

提前感谢您的帮助!

通常这些"按钮"将是链接，它们是使用锚标记(<a>)创建的。要访问的页面由标记上的href属性给出，这是一个URL。可以是绝对URL (http://stackoverflow.com)，也可以是相对URL (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>

大多数情况下也会使用CSS。如果您希望它们都在列表中运行，您可以在HTML中使用以下命令:

<ul class="navmenu">
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact-me.html">Contact Me</a></li>
</ul>

，你的CSS样式应该是:

<style>
ul.navmenu {
/* enter your css UL MENU for your menu here*/
}
ul.navmenu li {
/* enter your css LIST for your menu here*/
}
ul.navmenu li a {
/* enter your css LINK for your menu here*/
}
</style>

你可以查找"CSS列表样式"，并获得更多关于如何改变它的外观的信息。希望这能帮助你开始。

要让按钮改变内容，需要添加页面。例如，您可以将第一个页面设置为index.html(或index.php或其他页面类型)、about.html和contact-me.html。你必须创建这些页面，这样当你点击这些链接时，你的链接就会从一个页面转到另一个页面。

如果您是web开发的新手，我建议您不要尝试从头构建像导航条这样的通用组件。相反，应该使用一个框架，比如Twitter Bootstrap。它有导航条

相关文章：