Как сделать Div клик-способный? - PullRequest
Новая
       13

Как сделать Div клик-способный?

28 голосов
/ 29 июня 2009 
<div><span>shanghai</span><span>male</span></div>

Для div, как указано выше, когда мышь включена, она должна стать курсором: указателем, а при щелчке запустить

функция JavaScript, как сделать эту работу?

РЕДАКТИРОВАТЬ : и как изменить цвет фона div, когда мышь включена?

ВНОВЬ РЕДАКТИРОВАТЬ : как сделать ширину первого диапазона = 120px? Кажется, не работает в Firefox

Ответы [ 9 ]

50 голосов
/ 29 июня 2009

Дайте ему идентификатор типа «что-то», затем: 

var something = document.getElementById('something');

something.style.cursor = 'pointer';
something.onclick = function() {
    // do something...
};

Изменение цвета фона (согласно вашему обновленному вопросу): 

something.onmouseover = function() {
    this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
    this.style.backgroundColor = '';
};
25 голосов
/ 29 июня 2009

<div style="cursor: pointer;" onclick="theFunction()">

это самая простая вещь, которая работает.

Конечно, в окончательном решении вы должны отделить разметку от стиля (css) и поведения (javascript) - прочитайте его в отдельном списке , чтобы ознакомиться с рекомендациями не только по решению этой конкретной проблемы, но и по дизайн разметки в целом.

8 голосов
/ 29 июня 2009

Предлагаю использовать jQuery: 

$('#mydiv')
  .css('cursor', 'pointer')
  .click(
    function(){
     alert('Click event is fired');
    }
  )
  .hover(
    function(){
      $(this).css('background', '#ff00ff');
    },
    function(){
      $(this).css('background', '');
    }
  );
5 голосов
/ 27 ноября 2013

Я предлагаю использовать CSS-класс под названием clickbox и активировать его с помощью jQuery: 

$(".clickbox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
 });

Теперь единственное, что вам нужно сделать, это пометить ваш div как интерактивный и предоставить ссылку: 

<div id="logo" class="clickbox"><a href="index.php"></a></div>

Плюс стиль CSS для изменения курсора мыши: 

.clickbox {
    cursor: pointer;
}

Легко, не правда ли?

2 голосов
/ 10 мая 2018

Самый простой из них: 

<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>
2 голосов
/ 29 июня 2009 
<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>

Это также изменит цвет фона

2 голосов
/ 29 июня 2009

Когда вы обновили свой вопрос, вот навязчивый пример: 

window.onload = function()
{
    var div = document.getElementById("mydiv");

    div.style.cursor = 'pointer';
    div.onmouseover = function()
    {
        div.style.background = "#ff00ff";
    };
}
2 голосов
/ 29 июня 2009

добавить атрибут onclick 

<div onclick="myFunction( event );"><span>shanghai</span><span>male</span></div>

Чтобы заставить курсор измениться, используйте Правило курсора CSS . 

div[onclick] {
  cursor: pointer;
}

Селектор использует селектор атрибута, который не работает в некоторых версиях IE. Если вы хотите поддерживать эти версии, добавьте класс в ваш div.

1 голос
/ 29 июня 2009

Если этот div - функция, я предлагаю использовать курсор: указатель в вашем стиле, например style = "cursor: указатель", и могу использовать функцию onclick.

как это 

<div onclick="myfunction()" style="cursor:pointer"></div>

, но я предлагаю вам использовать JS-фреймворк, например jquery или extjs

...