ホームページ > 記事 > ウェブフロントエンド > ジャンプリンクを追加_html/css_WEB-ITnose
ジャンプリンクを追加_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:03:041181ブラウズ
クリックするとポップアップ 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 にタグを追加します
aaaa にタグを追加します
0a545dcf8f3ffbf7392d9434d92f31701111b90dd5946f0946207856a8a37f441edf
タグの追加方法
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 までご連絡ください。