twitter-bootstrap 如何让我网站上的这个按钮重定向到网站上的另一个页面?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24914783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:10:24  来源:igfitidea点击:

How can I make this button in my website redirect to another page on the website?

javascriptjqueryhtmldjangotwitter-bootstrap

提问by confusedstudent

I have been trying to make this button redirect to another page on the website based on some of the research I've done here and in other places, but no matter what I try, it won't work. As a preface, this website is django-based, but I also have bootstrap, javascript, and JQuery in here.

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

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

So, the Sign up button is on the base page and create-student is the link to the page I want the button to go to. That's what I have so far, among other things I've tried. It simply refreshes the page and adds a ? to the end of the url.

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

回答by Chris Charles

As you are using bootstrap, you can style a link to look like a button:

当您使用引导程序时,您可以将链接的样式设置为看起来像一个按钮:

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

This also saves problem of no javascript

这也节省了没有javascript的问题

回答by Mauno V?h?

You should make it as a link, and style it to look like a button.

您应该将其设为链接,并将其样式设置为看起来像一个按钮。

With boostrap, this is accomplished by adding class="btn"to a link.

使用 boostrap,这是通过添加class="btn"到链接来实现的。

After that it is much simpler, no javascript tricks involved and you are using links when those should be used. (Navigating from page to another).

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

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

If you are curious how to style it as you wan't read more from the docs:

如果您对如何设置样式感到好奇,因为您不想从文档中阅读更多内容:

Boostrap docs about buttons.

关于按钮的 Boostrap 文档。

Basically, you can use any of the btn-default, btn-primary, btn-successand similar classes for the links also.

基本上,你可以使用任何的btn-defaultbtn-primarybtn-success和类似的类的链接也。

Cheers.

干杯。

回答by Rob Quincey

To expand on ChrisC's (and now Maunos - damn I'm too slow at typing) answer...

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

Can you not just make your an instead without needing to use Javascript?

你不能只做你的而不需要使用 Javascript 吗?

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

The advantage of using an <a>with a hrefis that it is symantically correct (it's a link tag, and you are creating a link), users without Javascript can use it (yes I know this is a very small issue these days but still), and it is better for people who want to right click and go Open link in new tab'. Try doing that with a javascript based button, you can't.

使用<a>带 a的优点href是它在符号上是正确的(它是一个链接标签,你正在创建一个链接),没有 Javascript 的用户可以使用它(是的,我知道这是一个非常小的问题,但现在仍然如此),并且对于想要右键单击并在新选项卡中打开链接的人来说更好。尝试使用基于 javascript 的按钮来执行此操作,您不能。

I see it mentioned that you might want this to be a submit. From the sounds of it I don't see that, but if it does need to be a submit it should be within a form, and the actionwill do the post to that particular page, e.g.

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

<form action="create-student">

<!-- Your form goes here -->

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

回答by cor

Considering it is a Django based site, and extending the anwer of @ChrisC, the correct way of doing it, would be:

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

  1. Give a name to the url that you want to access

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

  2. Use the name of the url on the hreftag in your template

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

  1. 为您要访问的网址命名

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

  2. 使用href模板中标签上的 url 名称

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

回答by Anto King

Add a ID to your button

为按钮添加 ID

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

$("#btnSubmit").click(function()
{
window.location.href = "http://stackoverflow.com"; //Your URi here
}):

MORE NOTE:I hope using a button type Submit to redirect to another page is odd, if you want to just redirect the user on button click, use button type instead of Submit typelike below

更多注意:我希望使用按钮类型提交重定向到另一个页面是奇怪的,如果你只想在按钮点击时重定向用户,请使用按钮类型而不是像下面这样的提交类型

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

(OR)

(或者)

Use a tag also like <a href="create-student" class="btn">Sign up</a>

使用标签也喜欢 <a href="create-student" class="btn">Sign up</a>

Hope this helps...

希望这可以帮助...

回答by RandomUs1r

Try...

尝试...

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

instead.

反而。

回答by Claudio Redi

The default behavior of the button element is to submit. Try cancelling the default behavior adding return false.

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

HTML

HTML

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

JS

JS

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