как сделать div доступным для нажатия?
-
21-08-2019 - |
Вопрос
<div><span>shanghai</span><span>male</span></div>
Для div, подобного приведенному выше, при включении мыши он должен становиться cursor: указатель, а при нажатии срабатывает
функция javascript, как выполнить эту работу?
Редактировать:и как изменить цвет фона div при включенной мыши?
ОТРЕДАКТИРУЙТЕ ЕЩЕ РАЗ: как сделать ширину первого диапазона = 120 пикселей? Кажется, не работает в Firefox
Решение
Дайте ему идентификатор типа "что-то", затем:
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 = '';
};
Другие советы
<div style="cursor: pointer;" onclick="theFunction()">
это самая простая вещь, которая работает.
Конечно, в окончательном решении вы должны отделить разметку от стиля (css) и поведения (javascript) - читайте об этом в отдельном списке за хорошие практики не только в решении этой конкретной проблемы, но и в разработке разметки в целом.
Я предлагаю использовать jQuery:
$('#mydiv')
.css('cursor', 'pointer')
.click(
function(){
alert('Click event is fired');
}
)
.hover(
function(){
$(this).css('background', '#ff00ff');
},
function(){
$(this).css('background', '');
}
);
Я предлагаю использовать 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;
}
Легко, не правда ли?
добавьте нажать атрибут
<div onclick="myFunction( event );"><span>shanghai</span><span>male</span></div>
Чтобы заставить курсор измениться, используйте правило курсора css.
div[onclick] {
cursor: pointer;
}
Селектор использует селектор атрибутов, который не работает в некоторых версиях IE.Если вы хотите поддерживать эти версии, добавьте класс в свой div.
Поскольку вы обновили свой вопрос, вот навязчивый пример:
window.onload = function()
{
var div = document.getElementById("mydiv");
div.style.cursor = 'pointer';
div.onmouseover = function()
{
div.style.background = "#ff00ff";
};
}
<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>
Это также изменит цвет фона
Самый простой из них всех:
<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>
Если этот div является функцией, я предлагаю использовать cursor: pointer в вашем стиле, например style="курсор: указатель", и можете использовать функцию onclick.
вот так
<div onclick="myfunction()" style="cursor:pointer"></div>
но я предлагаю вам использовать фреймворк JS, такой как jquery - jquery - запрос или extjs - экстджс