Notice: Undefined index: OZ_USER_CATEGORIES_MENU in /volume1/web/UKSYSTEM.RU/controllers/ProductController.php on line 17 Портал ЮК Система | Регистрация юридических лиц (ООО, АО, ЗАО) Notice: Undefined index: OZ_SERVER_TITLE in /volume1/web/UKSYSTEM.RU/views/product/view.php on line 5


Запросите бесплатную консультацию

Услуга Регистрация юридических лиц (ООО, АО, ЗАО)

Кнопка HTML: переход на другую страницу - разные подходы

Существует несколько способов создания кнопки HTML для перехода на другую страницу.

Метод 1

<button id="btn_click">Click Me</button>
<script>
$('#btn_click').on('click', function() { window.location = 'http://www.google.com'; });
</script>
  • Преимущество: Отдельный JS из HTML (MVC)
  • Недостаток: длинные коды, полагайтесь на JS
  • Примечание: селектор jQuery не является обязательным, может использовать традиционный JavaScript

Метод 2

<button onclick="window.location='http://www.google.com'">Click Me</button>
  • Преимущество: 1-лайнер, не нужно назначать идентификатор кнопке
  • Недостаток: смешайте JS с HTML, полагайтесь на JS

Метод 3

<a class="click-me" href="http://www.google.com">Click me</a>
<style>
.clickMe {
    -moz-appearance: button;
    -ms-appearance: button;
    -o-appearance: button;
    -webkit-appearance: button;
    appearance: button;
    text-decoration: none;
    color: #000;
    padding: 0.2em 0.4em;
}​
</style>
  • Преимущество: нет необходимости полагаться на JS
  • Недостаток: выглядит как поддельная кнопка, требуется IE9 + (appearance - свойство CSS3)
  • Примечание: это от здесь

Метод 4

<form action="http://www.google.com">
<button>Click Me</button>
</form>
  • Преимущество: самый короткий код, не нужно полагаться на JS
  • Недостаток: неправильное использование тега <form>. Не работает, если есть кнопка отправки

Программисты, которые подходят, являются наиболее эффективными (и, следовательно, широко используются), и почему?

Примечание: можем ли мы сделать это как сообщество wiki?