jqueryフォーカスが消えて非表示になります-フロントエンドQ&A-php.cn

jqueryフォーカスが消えて非表示になります

PHPz

リリース： 2023-05-14 11:08:37

オリジナル

524 人が閲覧しました

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 サイトの他の関連記事を参照してください。