jquery set li ausgewählt-Front-End-Fragen und Antworten-php.cn

jquery set li ausgewählt

WBOY

Freigeben： 2023-05-12 11:06:36

Original

1058 Leute haben es durchsucht

Bei der Verwendung von jQuery für die Seitenentwicklung ist es häufig erforderlich, den ausgewählten Status eines bestimmten Li-Elements in der Liste festzulegen. Diese Einstellung ist für einige Seiten, die eine Statusumschaltung erfordern, sehr wichtig. In diesem Artikel wird erläutert, wie Sie den Li-Auswahlstatus mithilfe von jQuery festlegen.

Zuerst müssen wir klarstellen: Um den Li-Auswahlstatus festzulegen, müssen wir einen Stil definieren und den Stil dann über jQuery auf das erforderliche Li-Element anwenden. Wenn wir auf das auszuwählende li-Element klicken, können wir auf diese Weise den ausgewählten Status ändern, indem wir den Stil hinzufügen oder löschen.

Das Folgende ist ein Codebeispiel:

<!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>

Nach dem Login kopieren

Der obige Code implementiert eine einfache Optionsliste und fügt einen Stil für den ausgewählten Status hinzu. Wenn wir auf eine Option in der Liste klicken, wird der ausgewählte Status durch jQuery-Code umgeschaltet.

Konkret verwenden wir die click()-Methode von jQuery, um das Klickereignis jedes li-Elements abzuhören, und entfernen dann in der Ereignishandlerfunktion zuerst den ausgewählten Stil aller li-Elemente in der Liste und dann das aktuell angeklickte li Fügen Sie den ausgewählten Stil zum Element hinzu, um den ausgewählten Status zu ändern.

Eine weitere zu beachtende Sache ist, dass wir die Methoden addClass() und removeClass() verwenden, um CSS-Klassen hinzuzufügen und zu entfernen, um eine CSS-Klasse im Stylesheet vorzudefinieren, und dann den Klassennamen in jQuery verwenden, um die Auswahl zu steuern Stil des Status.

Im eigentlichen Entwicklungsprozess kann der Selektor auch flexibel umgestaltet und an die tatsächlichen Bedürfnisse angepasst werden. Beispielsweise können wir das zu bedienende li-Element über verschiedene Methoden wie ID, Attribute, Tag-Namen usw. auswählen. Wir können auch komplexere Logik verarbeiten, indem wir benutzerdefinierte Attribute, Datenattribute usw. kombinieren.

Kurz gesagt, es ist sehr einfach, mit jQuery den ausgewählten Status von li festzulegen. Sie müssen nur einige grundlegende jQuery-Kenntnisse beherrschen, um Komponenten wie Optionslisten zu implementieren, die einen Statuswechsel erfordern.

Das obige ist der detaillierte Inhalt vonjquery set li ausgewählt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!