如何使我网站中的此按钮重定向到网站上的另一个页面？

Posted 2023-02-24

【中文标题】如何使我网站中的此按钮重定向到网站上的另一个页面？

【英文标题】：How can I make this button in my website redirect to another page on the website?

【发布时间】：2014-09-14 21:23:21

【问题描述】：

根据我在这里和其他地方所做的一些研究，我一直在尝试将此按钮重定向到网站上的另一个页面，但无论我尝试什么，它都不起作用。作为前言，这个网站是基于 django 的，但我这里也有 bootstrap、javascript 和 JQuery。

<button type="submit" class="btn btn-link" onclick="window.location.href='create-student'">Sign up</button>

因此，注册按钮位于基本页面上，而 create-student 是指向我希望按钮转到的页面的链接。这就是我到目前为止所拥有的，以及我尝试过的其他事情。它只是刷新页面并添加一个？到网址的末尾。

【问题讨论】：

几个问题：你为什么直接写 JavaScript 代码？这不是那么容易阅读。为什么使用按钮而不是输入类型=“按钮”？您不需要特殊格式，只需要文本。为什么它是“提交”类型？如果您不需要提交表单，只需将其设为“普通”按钮（或链接）即可。

【参考方案1】：

当您使用引导程序时，您可以为链接设置样式，使其看起来像一个按钮：

<a href="create-student" class="btn">Sign up</a>

这样也解决了没有javascript的问题

【讨论】：

为什么这被否决了？我正要回答完全一样的。我总是建议在带有 onclick 的按钮上使用带有适当 href 的 。带有 onclick 的按钮有很多陷阱。

不知道为什么有人不赞成这个，我认为完全一样。 +1

@RobQuincey 嘿，但他需要一个 Subnit 类型的按钮，对吧？这不能用这个实现吗？

@AntoKing 我相信这只是混乱，onclick 动作表明他希望用户移动到另一个页面。

这是完美的，完全符合我的要求，只是它不再像一个按钮了。有没有办法做到这一点？我撒谎了，我只是添加了成功，现在它看起来像一个按钮。

【参考方案2】：

您应该将其设为链接，并将其样式设置为按钮。

使用 boostrap，这是通过将 class="btn" 添加到链接来完成的。

之后它就简单多了，不涉及任何 javascript 技巧，并且您在应该使用链接时使用链接。 （从页面导航到另一个页面）。

<a href="create-student" class="btn btn-default">Sign up</a>

如果您想知道如何设置它的样式，因为您不想从文档中阅读更多内容：

Boostrap docs about buttons.

基本上，您也可以对链接使用任何btn-default、btn-primary、btn-success 和类似的类。

干杯。

【参考方案3】：

扩展 ChrisC（现在是 Maunos - 该死的我打字太慢）的答案...

你能不只用一个而不需要使用 Javascript 吗？

<a class="btn btn-default" href="/create-student">Sign Up</a>

使用<a> 和href 的优点是它在语义上是正确的（它是一个链接标签，并且您正在创建一个链接），没有 Javascript 的用户可以使用它（是的，我知道这是一个非常这些天的小问题，但仍然），对于想要右键单击并在新标签中打开链接的人来说更好。尝试使用基于 javascript 的按钮来执行此操作，但不行。

我看到它提到您可能希望这是一个提交。从它的声音我看不出，但如果它确实需要提交，它应该在一个表单中，action 将发布到该特定页面，例如

<form action="create-student">

<!-- Your form goes here -->

<input type="submit" value="Sign Up" class="btn btn-default" />
</form>

【讨论】：

不，这个答案很完美，我只是对不同类别的按钮感到困惑。

【参考方案4】：

试试……

onclick="window.open('create-student')" 

改为。

【参考方案5】：

按钮元素的默认行为是提交。尝试取消添加return false的默认行为。

HTML

<button type="submit" class="btn btn-link" onclick="redirect">Sign up</button>

JS

function redirect() 
   window.location.href='create-student';
   return false; // cancel default behavior

【参考方案6】：

为您的按钮添加 ID

<button id="btnSubmit" type="submit" class="btn btn-link" >Sign up</button>

$("#btnSubmit").click(function()

window.location.href = "http://***.com"; //Your URi here
):

更多注意事项： 我希望使用按钮类型提交重定向到另一个页面是奇怪的，如果您只想在按钮单击时重定向用户，请使用 按钮类型而不是提交类型，如下所示

<input id="btnSubmit" type="button" class="btn btn-link" value="Sign Up">

（或）

也可以使用 <a href="create-student" class="btn">Sign up</a>

之类的标签

希望这会有所帮助...

【参考方案7】：

考虑到它是一个基于 Django 的站点，并扩展 @ChrisC 的答案，正确的做法是：

为您要访问的网址命名

url(r'^signup/$', your_view.SignUp.as_view(), name="signup"),

在您的模板中使用href 标记上的网址名称

<a class="btn" href="% url 'signup' %">Sign up</a>