如何创建带有不同按钮的nav列表，当我点击按钮时，内容/文本会根据我点击的按钮而改变?

I am new to programming so here is my basic question.

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

I know how to make a nav list but I don't know how to make it functional. For example, let's say that my navlist has 3 buttons: Home, About and Contact Me. How do I make my webpage to change from Home content between these 3 buttons??? What I mean is how do I get the different text/content when I click on About or Contact Me button?

我知道如何制作导航列表，但我不知道如何使它起作用。例如，假设我的导航列表有3个按钮:Home, About和Contact Me。我如何使我的网页改变这三个按钮之间的家庭内容???我的意思是，当我点击About或Contact Me按钮时，我如何获得不同的文本/内容?

Hope you understand what I mean. Must be really simple but I am just a begginer.

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

Thanks in advance for your help!

感谢您的帮助!

3 个解决方案

#1

Most situations will also use CSS. If you want them all run in a list, you would use the following in your HTML:

大多数情况下也会使用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>

and your CSS style would be:

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

You can look up "CSS list style" and get more information on how to change the looks of it. Hope that helps you get started.

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

To get the buttons to change content, you need to add pages. For example, you would make the first page index.html (or index.php, or other page types), about.html, and contact-me.html. You have to create those pages so your links will go from one page to the next when you click on those links.

要获得更改内容的按钮，需要添加页面。例如，您将创建第一个页面索引。html(或索引。php或其他页面类型)。html和contact-me.html。你必须创建那些页面，这样当你点击这些链接时，你的链接会从一个页面跳转到另一个页面。

#2

Usually those "buttons" would be links, which are created using the anchor tag (<a>). The page to go to is given by the href attribute on the tag, which is a URL. The URL can be absolute (http://*.com) or relative (about.html).

通常这些“按钮”将是链接，它们是使用锚标记创建的()。该页面是由标签上的href属性提供的，它是一个URL。URL可以是绝对的(http://*.com)或相对的(about.html)。

Here's an example of a link:

这里有一个链接的例子:

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

When the user clicks a link, the browser looks at the href and takes the user to that page.

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

I recommend working through any of a number of "beginning HTML" books and/or websites for a more thorough explanation.

我建议通过一些“开始的HTML”书籍和/或网站来进行更彻底的解释。

If for some reason you absolutely want to use actual buttons (not links styled to look like buttons), you can do that, but it's not recommended. Here are two ways:

如果出于某种原因，您绝对希望使用实际的按钮(而不是样式为按钮的链接)，您可以这样做，但不推荐这样做。这里有两种方式:

Make the button a submit button and put each one in its own form. The page the button will take the user to is defined as a URL in the action attribute of the form:

按下按钮，按下按钮，并将每个按钮按自己的方式进行。该按钮将把用户定义为表单动作属性中的URL:
```
<form action="about.html" method="GET">
    <input type="submit" value="About">
</form>
```
or

或
```
<form action="about.html" method="GET">
    <button>About</button>
</form>
```
(If you use a <button> tag, you can have rich text on the button. Also, since the default type of a <button> is submit, you don't need type="submit" on it.)

如果您使用 <按钮> 标记，您可以在按钮上有丰富的文本。另外，由于
Put an onclick handler on the button. I don't recommend this for several reasons, not least that they don't work if the user doesn't have JavaScript enabled, but that's rare.

在按钮上放一个onclick处理程序。我不推荐这样做有几个原因，尤其是如果用户没有启用JavaScript，那么它们就不起作用，但这是很少见的。
```
<input type="button" onclick="location = 'about.html'" value="About">
```
or

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

#3

If you are new to web development, I would advice that you do not try to build such a common component as a navbar from scratch. Rather, use a framework, such as Twitter Bootstrap. It has a navbar.

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

#1