Хобрук: Ваш путь к мастерству в программировании

Как сделать div интерактивным?

Я хочу сделать этот div доступным для кликов и хочу использовать тот же href внутри <a>, а также хочу сохранить ссылку внутри <a> (поэтому, если JS отключен, ссылка будет доступна).

<div id="example">

<p> some text </p>

<img src="example.jpg />

<a href="http://stackoverflow.com"> link </link>

</div>

Я имею в виду, что мне это нужно.

<div id="example" href="http://stackoverflow.com">

<p> some text </p>

<img src="example.jpg />

<a href="http://stackoverflow.com"> link </link>

</div>
javascript jquery css xhtml
21.05.2010

Ответы:


1

Что-то вроде этого должно сработать

$('#example').click(function() {
  window.location.href = $('a', this).attr('href');
});
21.05.2010
  • Чтобы добавить к этому, наличие стиля cursor: pointer; css в #example div даст пользователям обратную связь, что они могут щелкнуть div. 21.05.2010
  • @Josiah +1 спасибо за хорошее удобство использования. Единственный минус этого трюка - он не показывает статус ссылки в строке состояния при наведении курсора на div. 21.05.2010
  • @Slaks - Что вы имеете в виду под return false;? я должен добавить это в код? 21.05.2010
  • @SLaks - а где? вы имеете в виду, как это $('#example').click(function() { window.location.href = $('a', this).attr('href'); return false; }); Какая польза от добавления этого? 21.05.2010
  • @Ben Rowe - как это сделать для нескольких div? Я имею в виду, как добавить еще div сюда $('#example')? Могу ли я добавить еще div таких $('#example, #example2, #example3 ') 21.05.2010
  • @ metal-gear-solid да, вы можете расширить селектор, включив таким образом другие div 21.05.2010
  • Вы также можете использовать window.status, чтобы повлиять на статус наведения, если хотите, но, к сожалению, это работает только в IE. 21.05.2010

    • 2

    Я пока не могу ответить на вышеупомянутый разговор, потому что я здесь новичок, но я просто хотел сказать, что вам не нужно return false из этой функции. Это предотвращает поведение события по умолчанию (которое в случае нажатия div ничего не значит) и предотвращает распространение события до следующего элемента в иерархии DOM.

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

    // note that the function will be passed an event object as
// its first argument.
$('#example').click(function(event) { 
  event.preventDefault(); // the first effect
  event.stopPropagation(); // the second

  window.location.href = $('a', this).attr('href');
});

    Опять же, я не думаю, что в этом случае нужен какой-либо подход, но важно понимать, как они работают, потому что вам часто понадобится один или оба из них.

    21.05.2010
  • Если пользователь не щелкнет <a>. 21.05.2010
  • Верно, но обработчик событий здесь привязан к <div>, а не к <a>, поэтому return false; не вступит в силу вовремя, чтобы предотвратить По умолчанию на <a>. На самом деле, это всегда верно в jQuery, который, насколько мне известно, всегда использует восходящую модель, но в обычных сценариях DOM обработчик <div> может сначала срабатывать в браузерах, совместимых с W3C, при использовании распространения событий в стиле захвата. В любом случае, в данном конкретном случае особой разницы не будет. 21.05.2010

    • 3

    Я принимаю все приведенные выше ответы. И вообще вы можете произвести такой же или даже больший эффект для "div", чем "a" с помощью css. И вы можете добавить функцию js, чтобы отображать изменения css, когда произошло событие, такое как Click. Может быть так: DIV.onclick = function () {измените здесь целевой объект dom css}。 тогда, когда произойдет событие, вы увидите эффект. и если вы хотите изменить href на другой. напишите js, например location.href = "http://www.target.com"; это сработает для вас.

    11.11.2011

    4
  • Хорошее решение, хотя и требует доработки на случай, если перед соответствующим элементом стоит еще a; ID должен работать. jQuery и его ошибочный, неэффективный подход, основанный на attr (), не могут победить этого. Вам следует пропустить href LHS, потому что он испорчен. Ненавязчиво (ошибочно): document.getElementById("example").onclick = function() { window.location = this.getElementsByTagName('a')[0].href; }; Но обычно у вас есть оболочка, которая проверяет и пробует одно из addEventListener() или on… для этого, например мой jsx.dom.addEventListener() (слишком длинный URI, извините). 10.11.2011
    • Новые материалы
    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
    Обзор: Машинное обучение: классификация
    Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
    Разработка расширений Qlik Sense с qExt
    Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..