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

Posted

技术标签:

【中文标题】如何使我网站中的此按钮重定向到网站上的另一个页面?【英文标题】: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-defaultbtn-primarybtn-success 和类似的类。

干杯。

【讨论】:

【参考方案3】:

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

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

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

使用&lt;a&gt;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">

(或)

也可以使用 &lt;a href="create-student" class="btn"&gt;Sign up&lt;/a&gt;

之类的标签

希望这会有所帮助...

【讨论】:

【参考方案7】:

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

    为您要访问的网址命名

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

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

    &lt;a class="btn" href="% url 'signup' %"&gt;Sign up&lt;/a&gt;

【讨论】:

以上是关于如何使我网站中的此按钮重定向到网站上的另一个页面?的主要内容,如果未能解决你的问题,请参考以下文章

如何在不重新加载页面的情况下将用户重定向到 redux saga 上的另一个页面

有啥方法可以让浏览器页面避免 Pyqt5 中的重定向?

如果他没有登录,如何将用户重定向到网站中的特定页面?

virtualmin 上的虚拟服务器不断重定向到错误的网站

Javascript 代码重定向到同一页面上的一个部门

我的网页上的 PayPal 捐款确认