ジャンプリンクを追加_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

ジャンプリンクを追加_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:03 AM

クリックするとポップアップ 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 にタグを追加します

1111
タグの追加方法

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 を使用してプロンプトボックスをカプセル化します

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

＆lt; Progress＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

＆lt; datalist＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; meter＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTML5＆lt; time＆gt;を使用するにはどうすればよいですか日付と時刻を意味的に表す要素？Mar 12, 2025 pm 04:05 PM

この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

＆lt; iframe＆gt;の目的は何ですかタグ？使用する際のセキュリティ上の考慮事項は何ですか？Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles

ホットAIツール

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、