реклама
Очень часто используют событие click jquery. Обычно после события срабатывает особый сценарий. Вы можете придумать практически любой функционал на сайте. При обычном щелчке по ссылке пользователь переходит на другую страницу. Тут 2 пути использования этого события.
Сделайте текстовой документ в формате html и разместите в нем код что ниже. Вся информация будет выводиться в теге span. Щёлкая по абзацам p, вы увидите в теге span каждый раз новые данные.
<style>
p { color:red; margin:5px; padding:5px; cursor:pointer; }
p.hilite { background:yellow; }
</style>
</head>
<body>
<p id='id1' name='name1'>First Paragraph</p>
<p id='id2' name='name2'>Second Paragraph</p>
<p id='id3' name='name3'>3 Paragraph</p>
<p id='id4' name='name4'>4 Paragraph</p>
<p id='id5' name='name5'>Yet one more Paragraph</p>
<span>Вывод</span>
Вставьте следующий javascript код на страницу. При наведении на абзац вокруг абзаца будет появляться желтый фон + в теге span появится новая информация. При щелчке по абзацу сам абзац будет исчезать.
$("p").click(function () {
$(this).slideUp();
// блокировка перехода на другую страницу
return false;
});
$("p").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
var obj = {};
obj.id = $(this).attr('id');
obj.name = $(this).attr('name');
$("span").text('obj: ' + obj.id + ', name: ' + obj.name);
// блокировка перехода на другую страницу
return false;
});
Вы можете обратиться к свойствам объекта при помощи $(this). Если применить к селектору функцию attr(), то вы сможете узнать текущие свойства элемента. Например, $(this).attr('href') покажет вам ссылку.
Вы можете изменить свойства объекта. Смотрите статью как узнать изменить свойства элемента или атрибута attr() jquery.