HTML'de Metin Nasıl Genişletilir ve Daraltılır

HTML 5 zengin etkileşimli web siteleri vaat ediyor, ancak şu anda tarayıcılar özellik uygulamalarına göre değişiklik gösteriyor ve birçok işletme henüz yeni standartla uyumlu tarayıcılar dağıtmadı. Buna rağmen, mevcut tarayıcılarla zengin etkileşim uygulanabilir. Küçük bir JavaScript deneyimine sahip olanlar için, anahatları genişletmek ve daraltmak ve sitenize etkileşimli yardım eklemek için div etiketinin innerHTML özelliğini kullanmayı deneyin.

Yeni Bir Proje Oluştur

En sevdiğiniz Web geliştirme aracını açın ve yeni bir web sitesi oluşturun. WebDev sürümü ücretsiz indirilebildiğinden ve yerleşik bir Web sunucusu içerdiğinden Microsoft'un Visual Studio araçları burada kullanılacaktır.

Yeni bir HTML Sayfası Oluştur

Yeni bir sayfa default.htm oluşturun. “Project”, “Add Item” tıklayınız ve ardından “HTML Page” seçiniz ve default.htm olarak adlandırınız. Eğer default.aspx dosyası zaten mevcutsa, silin. HTML veya İşaretleme görünümüne geçin ve etiketten sonra aşağıdaki kodu ekleyin.

Örnek Sayfa

1 mi? Başlık 1

2 mi? Başlık 2

H3 etiketi “Örnek Sayfa” başlıklı bir sayfa başlığı ve ardından iki anahattı oluşturur. Her satır bir sayı, bir soru işareti ve bir başlık ile başlar. Soru işaretleri, çapalarla çevrilidir ((onları tıklanabilir bağlantılara dönüştüren etiketler. Her bir başlığın ardından, ek metnin eklenebileceği boş bir div etiketi ekledik).

JavaScript'i ekle

Soru işareti bağlantılarının her biri tarafından etkinleştirilebilecek bir JavaScript işlevi aşağıdaki gibi ekleyin:

Bağlantıların her biri, div tagname ve bazı ek metinlerden geçen JavaScript işlevini help_click olarak çağırır. İşlev önce div etiketinin boş olup olmadığını test eder (div.innerHTML == “”). Etiket boşsa, kod satır sonu ekler (

), üç boş karakter () ve ardından metin. Eğer div zaten metin içeriyorsa, div etiketinin içindeki işaretleme silinir.

Yeni Sayfayı Test Et

Kodu test et. Visual Studio için “F5” tuşuna tıklayın. Sayfa göründüğünde, soru işaretlerinden birini tıklayın. 1. satırdaki bağlantı ilk tıklandığında, anahat “Başlık 1 için ek metin” metnini içerecek şekilde genişler. Bağ tıklandığında ikinci kez metin kaybolur. Küçük bir yaratıcı kodla, bu aynı teknik ağaç görünümleri, karmaşık anahatlar oluşturmak veya yardım metnini göstermek ve gizlemek için kullanılabilir.