jqueryセットliが選択されました-フロントエンドQ&A-php.cn

jqueryセットliが選択されました

WBOY

リリース： 2023-05-12 11:06:36

オリジナル

1019 人が閲覧しました

ページ開発に jQuery を使用する場合、多くの場合、リスト内の特定の li 要素の選択状態を設定する必要があります。この設定は、状態の切り替えが必要な一部のページにとって非常に重要です。この記事ではjQueryを使ってliの選択状態を設定する方法を解説します。

まず第一に、明確にしておく必要があります。li 選択状態を設定するには、スタイルを定義し、jQuery を介してそのスタイルを必要な li 要素に適用する必要があります。このように、選択したいli要素をクリックすると、スタイルの追加・削除により選択状態を切り替えることができます。

以下はコード例です:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置li选中状态</title>
    <style type="text/css">
        .selected {
            background-color: #f5f5f5;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            $('ul li').click(function() {
                $('ul li').removeClass('selected');
                $(this).addClass('selected');
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
    </ul>
</body>
</html>

ログイン後にコピー

上記のコードは、単純なオプションリストを実装し、選択された状態のスタイルを追加します。リスト内のオプションをクリックすると、jQuery コードを通じて選択状態が切り替わります。

具体的には、jQuery の click() メソッドを使用して各 li 要素のクリックイベントをリッスンし、次にイベントハンドラー関数で、まずリスト内のすべての li 要素の選択されたスタイルを削除し、次に現在クリックされているli要素に選択されたスタイルが追加され、選択状態が切り替わります。

もう 1 つ注意すべき点は、特定の CSS クラスをスタイルシートで事前定義してから jQuery で使用できるように、addClass() メソッドとremoveClass() メソッドを使用して CSS クラスを追加および削除していることです。選択された状態のスタイルを制御します。

実際の開発プロセスでは、実際のニーズに応じてセレクターを柔軟に変換およびカスタマイズすることもできます。たとえば、ID、属性、タグ名など、さまざまな方法で操作する li 要素を選択できます。カスタム属性やデータ属性などを組み合わせて、より複雑なロジックを処理することもできます。

つまり、jQuery を使用して li selected 状態を設定するのは非常に簡単です。状態の切り替えが必要なオプションリストなどのコンポーネントを実装するには、jQuery の基本的な知識を習得するだけで済みます。

以上がjqueryセットliが選択されましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。