Jak rozwijać i zwijać tekst w HTML

HTML 5 obiecuje bogate interaktywne strony internetowe, ale w tej chwili przeglądarki mają różne implementacje funkcji, a wiele firm nie wdrożyło jeszcze przeglądarek zgodnych z nowym standardem. Mimo to, bogata interakcja może być zaimplementowana w obecnych przeglądarkach. Dla osób z niewielkim doświadczeniem związanym z JavaScriptem spróbuj użyć właściwości innerHTML znacznika div, aby rozwinąć i obliczyć kontury i dodać interaktywną pomoc do swojej witryny.

Utwórz nowy projekt

Otwórz swoje ulubione narzędzie do tworzenia stron internetowych i stwórz nową stronę internetową. Narzędzia Visual Studio Microsoftu będą używane tutaj, ponieważ wersję WebDev można pobrać za darmo i zawiera wbudowany serwer WWW.

Utwórz nową stronę HTML

Utwórz nową stronę default.htm. Kliknij "Projekt", "Dodaj element", a następnie wybierz "Strona HTML" i nazwij go default.htm. Jeśli plik default.aspx już istnieje, usuń go. Przejdź do widoku HTML lub znaczników i dodaj następujący kod po tagu.

Przykładowa Strona

1? Tytuł 1

2? Tytuł 2

Tag h3 tworzy nagłówek strony o nazwie "Strona próbki", a następnie dwie linie obrysu. Każda linia zaczyna się od cyfry, znaku zapytania i tytułu. Znaki zapytania są otoczone kotwicą ((tagi, które zmieniają je w klikalne linki. Po każdym tytule dodaliśmy pusty znacznik div, w którym można wstawić dodatkowy tekst.

Dodaj JavaScript

Dodaj funkcję JavaScript, która może być aktywowana przez każdy z linków zapytania w następujący sposób:

Każdy z łączy wywołuje funkcję help_click funkcji JavaScript, przekazując zmienną div i dodatkowy tekst. Funkcja najpierw sprawdza, czy znacznik div jest pusty (div.innerHTML == ""). Jeśli tag jest pusty, kod dodaje podział wiersza (

), trzy puste znaki (), po których następuje tekst. Jeśli element div zawiera już tekst, znacznik wewnątrz znacznika div zostanie wyczyszczony.

Przetestuj nową stronę

Przetestuj kod. W Visual Studio kliknij przycisk "F5". Po wyświetleniu strony kliknij dowolny ze znaków zapytania. Po pierwszym kliknięciu łącza w linii 1 kontur rozwija się, aby dołączyć tekst "Dodatkowy tekst do tytułu 1". Po drugim kliknięciu łącza tekst zniknie. Dzięki niewielkiemu kodowi kreacji ta sama technika może być używana do tworzenia widoków drzewa, złożonych konturów lub do wyświetlania i ukrywania tekstu pomocy.