添加跳转链接

伟洪winni 2015-11-23 03:55:32

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

...全文

135 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

业余草 2015-11-23

打赏
举报

你这个是个提示，是个属性！你自己要对此有些封装。使用div自己封装一个提示框

业余草 2015-11-23

打赏
举报

引用 6 楼 jslang 的回复:


<!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>

天际的海浪 2015-11-23

打赏
举报


<!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>

伟洪winni 2015-11-23