添加跳转链接_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
- 2016-06-21 09:03:041252검색
弹出来的aaaa 点击后跳转到一个链接,这个功能要怎么实现?
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title><style type="text/css">td:hover { position: relative;}td:hover:before { content: attr(data-title); position: absolute; left: 5px; top: 100%; background: #330099; color: #99FFFF; border: 1px solid #00FF00; border-radius: 5px; box-shadow: 3px 3px 3px #666666;}</style></head><body><table><tr><td data-title="aaaa">1111</td><td data-title="bbbb">2222</td><td data-title="cccc">3333</td></tr></table></body></html>
回复讨论(解决方案)
给aaaa添加a标签
给aaaa添加a标签
这个要怎么添加a标签
onclick="location=..."
因为:after 和:before伪元素不是真实的dom元素，只是实现了一些特定的效果，无法绑定事件
要绑定事件只能改用真实的dom元素了
因为:after 和:before伪元素不是真实的dom元素，只是实现了一些特定的效果，无法绑定事件
要绑定事件只能改用真实的dom元素了
这个日历的显示就是用上面的方法做的,
要怎么修改成可以点击的效果
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title><style type="text/css">td { position: relative;}td .tbox { position: absolute; left: 5px; top: 100%; background: #330099; color: #99FFFF; border: 1px solid #00FF00; border-radius: 5px; box-shadow: 3px 3px 3px #666666; text-decoration: none; display: none;}td:hover .tbox { display: block;}</style><script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body><table><tr><td data-title="aaaa" data-href="a.html">1111</td><td data-title="bbbb" data-href="b.html">2222</td><td data-title="cccc" data-href="c.html">3333</td></tr></table><script type="text/javascript">$(function(){ $("td").each(function(){ var t = $(this); var obj = $("<a>"); obj.addClass("tbox"); obj.text(t.data("title")); obj.attr("href",t.data("href")); t.append(obj) })});</script></body></html>
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title><style type="text/css">td { position: relative;}td .tbox { position: absolute; left: 5px; top: 100%; background: #330099; color: #99FFFF; border: 1px solid #00FF00; border-radius: 5px; box-shadow: 3px 3px 3px #666666; text-decoration: none; display: none;}td:hover .tbox { display: block;}</style><script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body><table><tr><td data-title="aaaa" data-href="a.html">1111</td><td data-title="bbbb" data-href="b.html">2222</td><td data-title="cccc" data-href="c.html">3333</td></tr></table><script type="text/javascript">$(function(){ $("td").each(function(){ var t = $(this); var obj = $("<a>"); obj.addClass("tbox"); obj.text(t.data("title")); obj.attr("href",t.data("href")); t.append(obj) })});</script></body></html> 你这个是个提示，是个属性！你自己要对此有些封装。使用div自己封装一个提示框
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.