Umístění skrytých bloků textu zlepšuje vizuální vnímání webové stránky - načte se do prohlížeče přesně tak, jak to navrhl designér, bez ohledu na množství zveřejněných informací. Pro návštěvníka je to navíc pohodlnější - při hledání potřebného bloku informací nemusí prohledávat celé pole, ale pouze malé „špičky ledovců“.
Je to nutné
Základní znalost HTML a JavaScript
Instrukce
Krok 1
Pomocí vlastní funkce JavaScriptu můžete skrýt a zobrazit požadované bloky textu na stránce HTML. Společná funkce pro všechny bloky je mnohem pohodlnější než přidávání kódu do každého z nich samostatně. V záhlaví zdrojového kódu stránky umístěte otevírací a zavírací značky skriptu a mezi nimi vytvořte prázdnou funkci s názvem, například swap a jeden požadovaný id vstupního parametru: funkce swap (id) {}
Krok 2
Přidejte dva řádky kódu JavaScript do těla funkce, mezi složené závorky. První řádek by měl číst aktuální stav bloku textu - ať už je jeho viditelnost zapnutá nebo vypnutá. V dokumentu může být několik takových bloků, takže každý musí mít svůj vlastní identifikátor - je to jeho funkce, která přijímá id jako jediný vstupní parametr. Pomocí tohoto identifikátoru vyhledá nezbytný blok v dokumentu a přiřadí hodnotu viditelnosti / neviditelnosti (stav vlastnosti zobrazení) proměnné sDisplay: sDisplay = document.getElementById (id).style.display;
Krok 3
Druhý řádek by měl změnit vlastnost zobrazení požadovaného bloku textu na opačnou - skrýt, pokud je text viditelný, a ukázat, zda je skrytý. To lze provést pomocí následujícího kódu: document.getElementById (id).style.display = sDisplay == 'none'? '': 'žádný';
Krok 4
Přidejte následující šablonu stylů do sekce záhlaví: a {cursor: pointer} Toto budete potřebovat pro správné zobrazení ukazatele myši, když umístíte ukazatel myši na neúplnou značku odkazu. Pomocí takových odkazů můžete na stránce uspořádat přepínání viditelnosti / neviditelnosti textových bloků.
Krok 5
Umístěte tyto přepínací odkazy do textu před každý skrytý blok a do bloků na konec textu přidejte podobný odkaz. Uzavřete neviditelný text do značek rozpětí, které mají v atributech stylu nastavenou neviditelnost. Například: Rozbalit text +++ Toto je skrytý text --- V tomto příkladu kliknutím na odkaz tři plus zavoláte výše uvedenou funkci v události onClick a předáte jí ID bloku, který se má zviditelnit. A uvnitř bloku je odkaz tří mínusů se stejnými funkcemi - kliknutím na něj skryjete text.
Krok 6
Vytvořte požadovaný počet textových bloků, podobný tomu popsanému v předchozím kroku, a nezapomeňte změnit ID v atributu id tagu span a v proměnné předané funkci pomocí události onClick ve dvou odkazech.
