Как создать стиль, чтобы он выглядел как ссылка, не используя javascript?

Для моего сайта мне нужно будет использовать <span> вместо <a>, потому что я использую в основном ajax, и поэтому вместо ссылок у меня есть onclick ajax events как атрибуты в моих пролетах.

В результате мне пришлось вручную создать прокрутки, чтобы они выглядели как ссылки. Я использовал зависание и посещал псевдоклассы, чтобы изменить цвет фона и текста, но чтобы поменять указатель мыши на указательный палец на зависании, мне нужно будет использовать javascript? Или я могу сделать это с помощью css?

Кроме того, я только что понял... не могу ли я использовать тег <a> в любом случае вместо <span>, но вместо href я бы включил onclick? Он должен работать одинаково, нет?

Ответ 1

span {
     cursor:pointer;
     color:blue;
     text-decoration:underline;
}

Кроме того, вы можете использовать псевдо-класс :hover для стилизации элемента при зависании (вы можете использовать любые стили, а не только те, которые изначально использовались). Ex.

span:hover {
     text-decoration:none;
     text-shadow: 1px 1px 1px #555;
}

Пример

Ответ 2

Обратите внимание, что если ваш сайт является общедоступным, и вы рассчитываете, что поисковые системы сканируют ваш сайт, вы потеряете много, оставив ссылки без href, так как паукам нечего захватывать при обходе вашей страницы.

Вы должны использовать полную ссылку - в случае, если ваш javascript сломается, пользователь все еще может перемещаться по страницам:

<a href="http://www.example.com">Link</a>

чем вы можете отключить ссылку с jquery с помощью preventDefault() - и вы полностью разделили базовый html и часть javascript, что означает ваш сайт по-прежнему можно использовать без javascript.

Чем вам не нужно беспокоиться о зависании и чем угодно - но только ради этого

span:hover {
cursor:pointer;
}

включит курсор на курсор на паре.

Ответ 3

Просто добавьте cursor:pointer; в span css.

Ответ 4

Вы можете использовать привязку. Но в javascript вам придется использовать event.preventDefault() Но есть метод CSS, который меньше и проще. Сохраните свой диапазон и используйте это:

span:hover{
    cursor:pointer;
}

Ответ 5

Option1

Просто используйте ссылку anchor следующим образом:

<a href="#" onclick="someFunction();"> Link </a>

Option2

Я не знаю, почему вы хотели бы использовать диапазон, но если вы это сделаете, вы можете сделать следующие стили, чтобы он выглядел похожим на привязку.

span {
    color: #000000; /* Change this with links color*/
    cursor: pointer;
    text-decoration: underline;
}

span:hover {
    color: #444444; /* Change the value to with anchors hover color*/
}

Ответ 6

Используйте CSS для отображения курсора в качестве указателя:

<span style="cursor: pointer;">Pseudolink</span>

http://jsfiddle.net/kkepg/

Ответ 7

Вы можете изменить курсор на указатель, указав правило CSS cursor: pointer.

Вы также можете использовать теги <a> вместо <span>, на самом деле они могут лучше себя вести с программами чтения с экрана и другими подобными устройствами. Вам не нужно указывать атрибут href, если вы используете функции preventDefault() и stopPropagation() JavaScript в обработчике onClick. Таким образом, вы можете сохранить некоторый уровень обратной совместимости с браузерами, не поддерживающими JS.

Ответ 8

Вы можете использовать событие onClick, но если я правильно помню, вы должны вернуть false, чтобы ваша страница не прыгала; что-то вроде:

<a href="#" onClick="myfunction();return false;">

или: <a href="#" onClick="return myfunction();"> при условии, что myfunction вернет false.

Вы также можете напрямую вызвать javascript из href, но вы должны сделать результат недействительным, чтобы заблокировать браузер, чтобы попытаться выполнить результат как действительную ссылку:

<a href="javascript:void(myFunction())">

Даже если вы все еще хотите использовать свойство onClick; было бы неплохо заменить href="#" на href="javascript:void(0)" ...>.

Другие люди упомянули, используя event.preventDefault() и stopPropagation(). Я не помню, чтобы когда-либо использовал один из них, но я должен признать, что прошло много лет с тех пор, как я последний раз кодировал некоторый javascript в HTML-ссылке; поэтому вы должны обязательно изучить использование этих двух функций.

EDIT: возможно, что использование href="javascript:void(0)" иногда может быть плохой идеей; см. http://drupal.org/node/1193068.