0

我有一个包含多个按钮的页面，我希望每个按钮都能将用户带到不同的地方。我到处搜索教程，但不知道该怎么做。我体内有这个：

<form method="get" action="KFC.html">
    <input type="submit" value="KFC">
</form>

<form method="get" action="Pizza_Hut.html">
    <input type="submit" value="Pizza Hut">
</form>


<form method="get" action="Olive_Garden.html">
    <input type="submit" value="Olive Garden">
</form>


<form method="get" action="Create_Order.html">
    <input type="Submit" value="Create Your Own Order">
</form>

</body>

如何在一个页面上制作多个按钮去不同的地方？这是正确的吗？它有效，但有人告诉我这是一个非常糟糕的方法。

4

3 回答 3

1

尝试添加标准的浏览器独立锚链接，然后使用 CSS 将它们设置为看起来像您想要的按钮。

 <a href="KFC.html" class="button">KFC</a>
 <a href="Pizza_hut.html" class="button">Pizza hut</a>

等等...

然后是 CSS。在下面的示例中，我展示了一种样式链接（如按钮）的方式，如果您搜索它，我相信您可以找到许多其他更合适的外观。

a.button { 
   display: inline-block;
   padding: 5px;
   border: 1px solid #999;
   background: #aaa;
   color: #333;
   text-decoration: none;
 }
 a.button:hover {
   background: #ccc;
 }

我添加了一个类“按钮”，因此您只需将某些链接设置为按钮。这样，您可以添加任意数量的“按钮”，而无需在代码中添加表单，也不会影响页面上的其他链接。

于 2013-04-28T21:25:19.603 回答
0

您正在创建多个表单，这也可能导致延迟和验证问题。如果你想让你的按钮去某个地方，特别是有一些方法。

您可以使用 onclick 属性来捕获单击事件并根据按钮选择正确的位置，这样可以工作。

<button type="button" id="1" onclick="window.location = newLocation1;">Click Me 1!</button>
<button type="button" id="2" onclick="window.location = newLocation2;">Click Me 2!</button>
<button type="button" id="3" onclick="window.location = newLocation3;">Click Me 3!</button>
于 2013-04-28T21:19:19.853 回答
0

谢谢你。原来你会想要一些与上面的答案非常相似的东西。但由于某种原因，我不明白。这是我的html代码：

<body>
<p>Deliveries<p>
<a href="KFC_Menu.html">KFC</a>  #This part -> >KFC</a> gives you the text that appears on the button. The <a href="KFC_Menu.html"> will take you to the KFC_Menu page.

<br>
<a href="Create_Order.html">Create Your Own Order</a>

要将这些链接设置为看起来像按钮的样式，请制作一个像这样的 CSS 文件作为示例：

样式表.css

a {
text-decoration: none;
font-size: 24px;
font-family: sans-serif, arial;
font-weight: bold;
background-color: blue;
color: #ffffff;
padding: 8px;
border: 2px solid grey;
border-radius: 10px;

}

于 2013-04-29T16:23:51.267 回答