ホームページ > 記事 > ウェブフロントエンド > jqueryフォーカスが消えて非表示になります
jqueryフォーカスが消えて非表示になります
- PHPzオリジナル
- 2023-05-14 11:08:37505ブラウズ
Web デザインでは、フォーカスが消えたり非表示になったりするのは一般的な現象です。 jQuery を使用してコードを記述することで、この効果を簡単に実現できます。この記事では、jQuery を使用してフォーカスを消す効果を実現する方法とサンプル コードを紹介します。
フォーカスの消失および非表示とは何ですか?
Web デザインでは、フォーカスが消えたり非表示になったりするのは一般的な現象です。入力ボックスやタブなどの対話型コントロールで情報を入力したりオプションを選択したりすると、通常、いくつかのプロンプトや操作メニューが表示されます。コントロールを離れてフォーカスを他の場所に移動すると、これらのプロンプトまたは操作メニューは自動的に消えます。この効果の目的は、ページの視覚的な明瞭さと美しさを向上させることです。
jQuery を使用してフォーカスの消失と非表示を実現するにはどうすればよいですか?
フォーカスが消えたり非表示になったりする効果を実現するには、jQuery を使用してコードを記述します。この効果を実現するサンプル コードを次に示します。
<!DOCTYPE html>
<html>
<head>
<title>jQuery 焦点消失隐藏示例</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="text" id="inputBox">
<div id="tipBox" class="hidden">请输入内容</div>
<script>
$(document).ready(function(){
$("#inputBox").focus(function(){
$("#tipBox").removeClass("hidden");
}).blur(function(){
$("#tipBox").addClass("hidden");
});
});
</script>
</body>
</html>上記のコードは、入力ボックスとプロンプト ボックスの例を示しています。ユーザーが入力ボックスに情報を入力すると、プロンプト ボックスに対応する情報が表示されます。ユーザーが入力ボックスを離れると、プロンプト ボックスは自動的に消えます。
コードでは、jQuery の focus メソッドと Blur メソッドを使用します。入力ボックスにフォーカスが移ったら、removeClass メソッドを使用してプロンプト ボックスの非表示クラスを削除し、ページに表示されるようにします。ユーザーが入力ボックスを離れると、addClass メソッドを使用して非表示クラスを追加し、プロンプト ボックスが自動的に非表示になるようにします。
また、非表示クラスを定義し、display: none; 属性を使用して、プロンプト ボックスが最初に非表示になるように設定します。このようにして、ユーザーが初めてページに入ったとき、プロンプト ボックスはデフォルトで非表示になります。
その他のサンプル コード
上記のサンプル コードに加えて、参照用に他のフォーカス非表示非表示のサンプル コードも提供します。
タブのヒント
<!DOCTYPE html>
<html>
<head>
<title>选项卡提示</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.tip {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
padding: 5px;
}
.active {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="tab active">选项卡1</li>
<li class="tab">选项卡2</li>
<li class="tab">选项卡3</li>
</ul>
<div class="tip active">选项卡1的提示信息</div>
<div class="tip">选项卡2的提示信息</div>
<div class="tip">选项卡3的提示信息</div>
<script>
$(document).ready(function(){
$(".tab").mouseover(function(){
var index = $(this).index();
$(".tip").eq(index).removeClass("hidden").addClass("active");
}).mouseout(function(){
var index = $(this).index();
$(".tip").eq(index).removeClass("active").addClass("hidden");
});
});
</script>
</body>
</html>上記のコードは、タブ プロンプトの例を示しています。ユーザーがタブの上にマウスを置くと、対応するツールチップがページ上に表示されます。ユーザーがマウスをタブの外に移動すると、プロンプト ボックスは自動的に消えます。
コードでは、jQuery のマウスオーバー メソッドとマウスアウト メソッドを使用します。 RemoveClass メソッドを使用してツールチップの非表示クラスを削除し、アクティブ クラスを追加して、マウスがタブ上にあるときにページ上に表示されるようにします。マウスがタブの外に移動すると、removeClass メソッドを使用してアクティブなクラスを削除し、非表示のクラスを追加してプロンプト ボックスを自動的に非表示にします。
入力ボックスとボタン
<!DOCTYPE html>
<html>
<head>
<title>输入框和按钮示例</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="text" id="inputBox">
<button id="btn">提交</button>
<div id="tipBox" class="hidden">请输入内容</div>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var inputValue = $("#inputBox").val();
if(inputValue === ""){
$("#tipBox").removeClass("hidden");
}else{
$("#tipBox").addClass("hidden");
}
});
});
</script>
</body>
</html>上記のコードは、入力ボックスとボタンの例を示しています。ユーザーが送信ボタンをクリックすると、入力ボックスが空の場合は、ページにプロンプト ボックスが表示されます。それ以外の場合、プロンプト ボックスは自動的に消えます。
コードでは、jQuery の click メソッドを使用します。ユーザーが送信ボタンをクリックすると、val メソッドを使用して入力ボックスの内容を取得し、それが空かどうかを判断します。空の場合は、removeClass メソッドを使用してプロンプト ボックスの非表示クラスを削除し、ページに表示できるようにします。それ以外の場合は、addClass メソッドを使用して非表示クラスを追加し、プロンプト ボックスが自動的に非表示になるようにします。
結論
フォーカスの消失や非表示は、Web デザインではよく見られる現象です。 jQuery を使用してコードを記述することで、この効果を簡単に実現できます。この記事では、フォーカスの消失に関する知識とサンプルコードを紹介します。フォーカスが消えたり非表示になったりする効果を実現したい場合は、この記事で提供されているコードを参照して、対応する変更や調整を行うことができます。
以上がjqueryフォーカスが消えて非表示になりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。