添加跳转链接_html/css_WEB-ITnose-html教程-PHP中文网

添加跳转链接_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:03:04

原创

1342人浏览过

弹出来的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标签

1111
这个要怎么添加a标签

onclick="location=..."

因为: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自己封装一个提示框