Umieszczanie ukrytych bloków tekstu poprawia wizualną percepcję strony internetowej - wczytuje się ona do przeglądarki dokładnie tak, jak zaprojektował ją projektant, niezależnie od ilości zamieszczonych informacji. Poza tym jest to wygodniejsze dla zwiedzającego – w poszukiwaniu niezbędnego bloku informacji nie musi przeszukiwać całej tablicy, a jedynie małe „czubki gór lodowych”.
Czy to jest to konieczne
Podstawowa znajomość HTML i JavaScript
Instrukcje
Krok 1
Użyj niestandardowej funkcji JavaScript, aby ukryć i wyświetlić żądane bloki tekstu na stronie HTML. Wspólna funkcja dla wszystkich bloków jest znacznie wygodniejsza niż dodawanie kodu do każdego z nich z osobna. W części nagłówkowej kodu źródłowego strony umieść otwierające i zamykające znaczniki skryptu, a między nimi utwórz pustą funkcję o nazwie np. swap i jednym wymaganym parametrze wejściowym id: function swap (id) {}
Krok 2
Dodaj dwa wiersze kodu JavaScript do treści funkcji, między nawiasami klamrowymi. Pierwsza linia powinna odczytywać aktualny stan bloku tekstu - czy jego widoczność jest włączona czy wyłączona. W dokumencie może być kilka takich bloków, więc każdy musi mieć swój identyfikator - to jego funkcja otrzymuje id jako jedyny parametr wejściowy. Za pomocą tego identyfikatora wyszukuje potrzebny blok w dokumencie, przypisując wartość widoczności/niewidzialności (stan właściwości display) zmiennej sDisplay: sDisplay = document.getElementById (id).style.display;
Krok 3
Druga linia powinna zmienić właściwość wyświetlania żądanego bloku tekstu na przeciwną - ukryj, jeśli tekst jest widoczny i pokaż, czy jest ukryty. Można to zrobić za pomocą następującego kodu: document.getElementById (id).style.display = sDisplay == 'brak'? '': 'Żaden';
Krok 4
Dodaj następujący arkusz stylów do sekcji nagłówka: a {cursor: pointer} Będzie to potrzebne do prawidłowego wyświetlania wskaźnika myszy, gdy najedziesz na niekompletny znacznik linku. Za pomocą takich linków organizujesz na stronie przełączanie widoczności / niewidoczności bloków tekstu.
Krok 5
Umieść te linki przełączające w tekście przed każdym ukrytym blokiem, a w blokach na końcu tekstu dodaj podobny link. Umieszczaj niewidoczny tekst w znacznikach span, których atrybuty stylu mają ustawioną niewidzialność. Na przykład: Rozwiń tekst +++ To jest tekst ukryty --- W tym przykładzie kliknięcie linku z trzema plusami wywoła powyższą funkcję w zdarzeniu onClick, przekazując jej identyfikator bloku, który ma być widoczny. A wewnątrz bloku znajduje się link z trzema minusami o tych samych funkcjach - kliknięcie go ukryje tekst.
Krok 6
Utwórz wymaganą liczbę bloków tekstu, podobnie jak w poprzednim kroku, pamiętając o zmianie identyfikatorów w atrybucie id tagu span oraz w zmiennej przekazywanej funkcji przez zdarzenie onClick w dwóch linkach.
