如何使我网站中的此按钮重定向到网站上的另一个页面?
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-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>
【讨论】:
以上是关于如何使我网站中的此按钮重定向到网站上的另一个页面?的主要内容,如果未能解决你的问题,请参考以下文章