Подтвердить что ты не робот

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

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

Кнопка

теперь выглядит следующим образом:

<button>Visit Page Now</button>

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

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

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

С нетерпением ждем некоторых вариантов/мнений.

4b9b3361

Ответ 1

Встроенный 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';
});

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

Ответ 4

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

#btn {
  background: url(https://image.flaticon.com/icons/png/128/149/149668.png) no-repeat 0 0;
  display: block;
  width: 128px;
  height: 128px;
  border: none;
  outline: none;
}
<a href="btnlink.html" id="btn"></a>

Ответ 5

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

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

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

Ответ 6

ССЫЛКИ НАДЕЖНЫ

Рассмотрим приемы, которые & lt; href> знает по умолчанию, но связывание с javascript не подойдет вам. На приличном веб-сайте все, что хочет вести себя как ссылка, должно так или иначе реализовывать эти функции. А именно:

  • Ctrl + Click: открывает ссылку в новой вкладке
    . Вы можете смоделировать это с помощью window.open() без аргумента позиции/размера
  • Shift + клик: открывает ссылку в новом окне
    . Вы можете смоделировать это с помощью window.open() с указанием размера и/или положения
  • Alt + Click: загрузка цели
    Люди редко используют ее, но если вы настаиваете на симуляции, вам нужно написать специальный скрипт на стороне сервера, который отвечает с правильными заголовками загрузки.

ЛЕГКО ВЫХОДИТЬ

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

Ответ 7

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

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

Ответ 8

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

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

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