ტექსტის ფარული ბლოკების განთავსება აუმჯობესებს ვებ – გვერდის ვიზუალურ აღქმას - ის იტვირთება ბრაუზერში ზუსტად ისე, როგორც ეს დიზაინერმა შექმნა, მიუხედავად გამოქვეყნებული ინფორმაციის რაოდენობისა. გარდა ამისა, ვიზიტორისთვის ეს უფრო მოსახერხებელია - ინფორმაციის საჭირო ბლოკის ძიებაში, მას არ უნდა გადახედოს მთელ მასივს, არამედ მხოლოდ მცირე "აისბერგების წვერებს".
Ეს აუცილებელია
HTML და JavaScript– ის ცოდნა
ინსტრუქციები
Ნაბიჯი 1
გამოიყენეთ JavaScript მორგებული ფუნქცია, რომ დაიმალოთ და აჩვენოთ ტექსტის სასურველი ბლოკები HTML გვერდზე. ყველა ბლოკის საერთო ფუნქცია ბევრად უფრო მოსახერხებელია, ვიდრე თითოეულ მათგანს ცალკე კოდის დამატება. გვერდის კოდის სათაურის ნაწილში მოათავსეთ სკრიპტის გახსნისა და დახურვის ტეგები და მათ შორის შექმნათ ცარიელი ფუნქცია სახელით, მაგალითად, swap და ერთი საჭირო შეყვანის პარამეტრი id: function swap (id) {}
ნაბიჯი 2
ფუნქციის კორპუსს დაამატეთ JavaScript კოდის ორი ხაზი ტალღოვან საყრდენებს შორის. პირველ სტრიქონში უნდა იკითხებოდეს ტექსტის ბლოკის ამჟამინდელი მდგომარეობა - არის თუ არა გამორთული მისი ხილვადობა. დოკუმენტში შეიძლება რამდენიმე ასეთი ბლოკი იყოს, ამიტომ თითოეულს უნდა ჰქონდეს საკუთარი იდენტიფიკატორი - ეს არის მისი ფუნქცია, რომელიც იღებს id- ს, როგორც ერთადერთ შეყვანის პარამეტრს. ამ იდენტიფიკატორის საშუალებით, იგი ეძებს დოკუმენტში საჭირო ბლოკს, sDisplay ცვლადს ანიჭებს ხილვადობის / უხილავის მნიშვნელობას (ჩვენების თვისების მდგომარეობა): sDisplay = document.getElementById (id).style.display;
ნაბიჯი 3
მეორე სტრიქონმა უნდა შეცვალოს სასურველი ბლოკის ჩვენების საწინააღმდეგო თვისება - დამალვა, თუ ტექსტი ჩანს, და აჩვენებს, თუ ის დაფარულია. ეს შეიძლება გაკეთდეს შემდეგი კოდის საშუალებით: document.getElementById (id).style.display = sDisplay == "არცერთი"? '': 'არცერთი';
ნაბიჯი 4
დაამატეთ შემდეგი სტილის ფურცელი სათაურის განყოფილებას: a {cursor: pointer} თქვენ დაგჭირდებათ მაუსის მაჩვენებლის სწორად საჩვენებლად, როდესაც არასრული ბმულის თეგზე გადაადგილდებით. ამ ბმულების დახმარებით, თქვენ ორგანიზებას უკეთებთ გვერდზე ტექსტური ბლოკების ხილვადობას / უხილავს.
ნაბიჯი 5
განათავსეთ ეს გადართვის ბმულები ტექსტში ყოველი ფარული ბლოკის წინ, ხოლო ბლოკის ბოლოში ტექსტში დაამატეთ მსგავსი ბმული. შეიტანეთ უხილავი ტექსტი span ტეგებში, რომლებსაც აქვთ უხილავი სტილის ატრიბუტებში. მაგალითად: ტექსტის გაფართოება +++ ეს არის დამალული ტექსტი --- ამ მაგალითში, სამი პლუს ბმულზე დაწკაპუნებით, ზემოთ მონიშნულ ფუნქციას მოვუწოდებთ onClick ღონისძიებას, გადასცემს მას ბლოკის ID- ს, რომელიც ჩანს. ბლოკის შიგნით არის სამი მინუსის ბმული იგივე ფუნქციებით - მასზე დაჭერით დაიმალება ტექსტი.
ნაბიჯი 6
შექმენით საჭირო რაოდენობის ტექსტური ბლოკები, მსგავსი წინა ნაბიჯში აღწერილისა, გახსოვდეთ შეცვლა პირადობის მოწმობის sp ატრიბუტის ID ატრიბუტში და onClick ღონისძიების მიერ ფუნქციისთვის გადაცემულ ცვლადში ორი ბმული.
