Есть ли способ получить элемент <button>для ссылки на местоположение, не заключая его в - PullRequest
Новая
       8

Есть ли способ получить элемент <button>для ссылки на местоположение, не заключая его в

41 голосов
/ 17 февраля 2011

Просто интересно, есть ли способ получить элемент HTML <button> для ссылки на местоположение, не заключая его в тег <a href...?

В данный момент кнопка выглядит так: 

<button>Visit Page Now</button>

Что бы я предпочел , а не : 

<a href="link.html"><button>Visit Page Now</button></a>

Кнопка не используется в форме, поэтому <input type="button"> не вариант.Мне просто любопытно посмотреть, есть ли способ связать этот конкретный элемент без необходимости заключать его в тег <a href.

Будем рады услышать некоторые варианты / мнения.

Ответы [ 8 ]

67 голосов
/ 17 февраля 2011

Встроенный Javascript: 

<button onclick="window.location='http://www.example.com';">Visit Page Now</button>

Определение функции в Javascript: 

<script>
    function visitPage(){
        window.location='http://www.example.com';
    }
</script>
<button onclick="visitPage();">Visit Page Now</button>

или в Jquery 

<button id="some_id">Visit Page Now</button>

$('#some_id').click(function() {
  window.location='http://www.example.com';
});
21 голосов
/ 12 июля 2012

Вот решение, которое будет работать, даже если JavaScript отключен: 

<form action="login.html">
    <button type="submit">Login</button>
</form>

Хитрость заключается в том, чтобы окружить кнопку собственным тегом <form>.

Лично я предпочитаю тег <button>, но вы можете сделать это и с <input>: 

<form action="login.html">
    <input type="submit" value="Login"/>
</form>
6 голосов
/ 17 февраля 2011

Ну, для ссылки должен быть тег ссылки вокруг.вы также можете создать класс CSS для кнопки и назначить этот класс тегу ссылки.как,

CSS 

#btn{ background:url(images/button.jpg) no-repeat 0 0; display:block; width:50px; height:20px; border:none; outline:none;}

HTML 

<a href="btnlink.html" id="btn"></a>
6 голосов
/ 17 февраля 2011

Просто сделай это 

<button OnClick=" location.href='link.html' ">Visit Page Now</button>

Хотя прошло уже много времени с тех пор, как я коснулся JavaScript - может быть, location.href устарел? В любом случае, вот как бы я это сделал.

5 голосов
/ 17 февраля 2011

Вы можете сделать ее кнопкой без отправки (<button type="button">) и вставить что-то вроде window.location = 'http://where.you.want/to/go' в ее обработчик onclick.Это не работает без включенного javascript.

Или вы можете сделать это кнопкой отправки и выполнить перенаправление на сервере, хотя для этого, очевидно, требуется какая-то логика на стороне сервера, но преимущество в том, чтоне требует javascript.

(собственно, забудьте второе решение - если вы не можете использовать форму, кнопка отправки отсутствует)

3 голосов
/ 09 ноября 2015

Просто примечание - вы можете рассмотреть приемы, которые известны по умолчанию, но связывание с JavaScript не подойдет вам.А именно:

  • если вы нажмете Ctrl, откроется новая вкладка;
  • если вы нажмете Shift, браузер откроет ссылку в новом окне;
  • если вы нажмете Alt, это будет команда загрузки цели.

Теперь, если вы не хотите имитировать все это поведение, я предлагаю использовать и стилизовать его как кнопка, так как сама кнопка представляет собой примерно форму и эффект наведения.Я думаю, если не семантически важно иметь только «кнопку и ничего больше», это путь самурая.И если вы беспокоитесь о семантике и удобочитаемости, вы также можете заменить элемент button, когда ваш документ готов ().Это ясно и безопасно.

2 голосов
/ 06 июля 2015

<form action="portfolio.html"> <button type="link" class="btn btn-primary btn-lg">View Work</button> </form>

Я только что понял это, и он отлично связывается с другой страницей, не используя мои настройки по умолчанию для ссылок на мои классы кнопок! :)

1 голос
/ 17 февраля 2011

Здесь используется jQuery. Смотрите это в действии на http://jsfiddle.net/sQnSZ/

<button id="x">test</button>

$('#x').click(function(){
    location.href='http://cnn.com'
})
...