Làm cách nào để tạo kiểu cho một khoảng trông giống như một liên kết mà không cần sử dụng javascript?

Question

Đối với trang web của tôi, tôi sẽ cần sử dụng <span> thay vì <a> vì tôi đang sử dụng chủ yếu là ajax và do đó thay vì liên kết tôi có các sự kiện onjick ajax dưới dạng thuộc tính trong các nhịp của tôi.

Kết quả là tôi đã phải tạo kiểu theo cách thủ công các nhịp để trông giống như các liên kết. Tôi đã sử dụng di chuột và truy cập các lớp giả để thay đổi màu nền và màu văn bản, nhưng để thay đổi con trỏ mặc định thành ngón tay trỏ khi di chuột, tôi có cần sử dụng javascript không? Hoặc tôi có thể làm điều đó bằng cách sử dụng css?

Ngoài ra, tôi vừa mới nhận ra ... tôi không thể sử dụng thẻ <a> anyways thay vì <span>, nhưng thay vì một href, tôi sẽ bao gồm một onclick? Nó sẽ hoạt động giống nhau, phải không?

Answer 1

Chỉ cần thêm cursor:pointer; vào số span css của bạn.

Answer 2

Sử dụng CSS để hiển thị con trỏ như một con trỏ:

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

http://jsfiddle.net/kkepg/

Answer 3

Bạn có thể sử dụng một neo. Nhưng trong javascript bạn phải sử dụng event.preventDefault() Nhưng có một phương thức CSS nhỏ hơn và dễ dàng hơn. Giữ khoảng của bạn và sử dụng này:

span:hover{ 
    cursor:pointer; 
} 

Answer 4

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

Ngoài ra bạn có thể sử dụng :hover pseudo-class để tạo kiểu phần tử khi dao động (bạn có thể sử dụng bất kỳ phong cách không chỉ là những người ban đầu được sử dụng). Ví dụ

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

Example

Answer 5

Bạn có thể thay đổi con trỏ đến một con trỏ bằng cách xác định quy tắc cursor: pointer CSS.

Bạn cũng có thể sử dụng các thẻ <a> thay vì <span>, trên thực tế chúng có thể hoạt động tốt hơn với trình đọc màn hình và các thiết bị tương tự khác. Bạn không cần phải bỏ thuộc tính href nếu bạn sử dụng các hàm preventDefault() và stopPropagation() JavaScript trong trình xử lý onClick. Bằng cách này bạn có thể giữ lại một số mức độ tương thích ngược với các trình duyệt được kích hoạt không phải JS.

Answer 6

OPTION1

Chỉ cần sử dụng một liên kết anchor như sau:

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

OPTION2

Tôi không biết lý do tại sao bạn sẽ muốn sử dụng khoảng thời gian, nhưng nếu bạn làm, bạn có thể làm như sau phong cách để làm cho nó trông giống như một liên kết neo.

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*/ 
} 

Answer 7

Lưu ý rằng nếu trang web của bạn là công khai và bạn đang trông chờ vào công cụ tìm kiếm để thu thập thông trang web của bạn, bạn sẽ mất rất nhiều bằng cách bỏ đi các liên kết mà không href từ nhện không có gì để lấy về trong khi crawl trang của bạn.

Bạn nên sử dụng một liên kết hoàn chỉnh - trong trường hợp javascript của bạn bị phá vỡ người dùng vẫn còn có thể điều hướng thông qua các trang:

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

hơn bạn có thể vô hiệu hóa các liên kết với jquery bằng cách sử dụng preventDefault() - và bạn hoàn toàn tách ra html cơ bản và phần javascript, có nghĩa là trang web của bạn vẫn có thể sử dụng được mà không cần javascript.

Thần bạn không cần phải bận tâm với khoảng di chuột và bất cứ điều gì - nhưng chỉ vì lợi ích của nó

span:hover { 
cursor:pointer; 
} 

sẽ cho phép di chuột con trỏ tay vào khoảng dao động.

Answer 8

Bạn có thể sử dụng sự kiện onClick nhưng nếu tôi nhớ chính xác, bạn phải trả về false để ngăn trang của bạn nhảy xung quanh; một cái gì đó như:

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

hoặc: <a href="#" onClick="return myfunction();"> miễn là myfunction sẽ trả về false.

Bạn cũng có thể trực tiếp gọi một javascript từ href nhưng bạn phải đúc kết quả để làm mất hiệu lực để chặn cho trình duyệt để cố gắng làm theo kết quả như một liên kết hợp lệ:

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

Thậm chí nếu bạn vẫn muốn sử dụng thuộc tính onClick; bạn vẫn nên thay thế href="#" bằng href="javascript:void(0)" ...>.

Những người khác đã đề cập đến bằng cách sử dụng event.preventDefault() và stopPropagation(). Tôi không nhớ bao giờ sử dụng một trong số này nhưng tôi phải thừa nhận rằng nó đã được nhiều năm kể từ lần cuối cùng mà tôi đã mã hóa một số javascript trong một liên kết HTML; vì vậy bạn chắc chắn nên điều tra việc sử dụng hai chức năng này.

CHỈNH SỬA: có thể sử dụng href="javascript:void(0)" đôi khi có thể là một ý tưởng tồi; xem http://drupal.org/node/1193068.