3 Mart 2014, PAZARTESİ

Javascript Css Sınıf Stilini Değiştir Classname Geçiş Eğitimi

Ve JavaScript programlama öğretici değiştirmek öğrenmek geçiş ve takas CSS sınıfları İlk işlenmiş üründe hızlı bir göz atın Eğer programlama olacak let İlk örnek CSS sınıfı toddling olduğunu öylesine n diğer tıklanan elemanın bunlardan herhangi birine giderseniz elemanları ve onlar bir açmak onlara tıklayın temelde için bu sınıfa sınıftan 1 gidiyor Bir off biz programlamak için gidiyoruz mekanizma geçiş yapmak için değil Bu dersimizde mücadele için gidiyoruz başka bir örnek CSS sınıfı değişiyor tıklandığında at Çocuğun içindeki alt öğe bu kutuları için tüm Oranı Bizim çocuklar, diğer ana öğe ve varsayılan Ben ikin

ci bir tıklarsanız sonra aktif yaktı ilki yapılan bu ikinci aktif olan birinci değişir Ben dördüncü birini tıklatın eğer swapları yerde aynı şey olur Bu görünen ile hepsi açmak ve kapatmak olacak Bu onları geçiş yaparak bunl

arı geçiş off bunları açın edebilirsiniz ama onlar takas Bizim örnek HTML dosyasına gitmek biz yapacağız ilk şey olduğunu k Ben stil öğesi koymak için gidiyorum bu iki kural sayfadaki sınıfta 1 ve sınıf 2 yüzde

“Ders Kodu: http://www.developphp.com/video/JavaScript/Change-CSS-Class-Style-className-Toggle-Tutorial Değiştirmek geçiş ve taşıma JavaScript olayı kullanarak tak...”
Adam Khoury

n ne olursa olsun verilen 1. sınıf bu özelliklere sahip olacak sayfadaki ne bu özelliklere sahip olacaktır için sınıf verilir Şimdi benim vücut elemanı Ford kimlikleri yere gidiyor Sınıfta Nike bu hale 1 her sevdiğim tarayıcı ve benim Ford kimlikleri hızlı bir gösteri amaçlı böylece Sadece doğrudan olay işleme koyacağız elementler yaptım bunun için click olayı hedef alacaktır ve tıklama durumunda size öyleyse istediğiniz herhangi bir JavaScript kodu çal

Javascript Css Sınıf Stilini Değiştir Classname Geçiş Eğitimi Resim 1 Javascript Css Sınıf Stilini Değiştir Classname Geçiş Eğitimi Resim 2 Javascript Css Sınıf Stilini Değiştir Classname Geçiş Eğitimi Resim 3 Javascript Css Sınıf Stilini Değiştir Classname Geçiş Eğitimi Resim 4

ıştırabilir Değiştirmek sadece oldu amaçlamak Bu eleman tıklandığında sınıf 12 sınıf sınıf Eğer sadece bu nokta classname söyleyebiliriz tek tırnak arasına ve eşit şimdi sınıf koyacağız bu ilk yaptığımız click olayı bir aşağıdaki kod bu barajın yürütmek yapmak için gidiyor etti soyadı I sınıfı bir iyilik tarayıcı daha çalıştırıldı eşittir İlk eleman T tıklayın izin Şimdi henüz bunu programlanmış diğer olanlar için sınıfa değiştirildi biz Hala Bir geçiş yok Tekrar elemanı tıkladığınızda yapmak zorunda Bir geçiş oluşturmak için onu giymek

Kendi sınıfındaki 2'de verilen sonra sınıfa 1 geri değiştirir ve size javascript kullanarak programlamaya sahip bir geçiş mekanizması var ve biz sadece tıklama olayını kullanabilirsiniz click olayı kullandığınız için ne Eğer yük olayları sürükle olayları hedefleyebilir hedefleyebilir Kaydırma olaylar çift tıklama olayları geniş ağlar Javascript bu şeyleri değiştirmeye muktedir kullanışlı Şimdi bizim toggle fonksiyonunu yapmak için biz bu almak için gidiyoruz onclick olayı içinde kontrol Pics olacak denilen özel bir işlev çalıştırmak geçiş sınıfı açık yakın parantez parantez arasına biz bu koymak için gidiyoruz Bize bu başvuru için izin gidiyor hangi Deann dinamik kelime bu yüzden temsil eder biz koymak üzereyiz fonksiyonu sayesinde oluyor bu vermek yer Burada bizim baş elemanı bu yüzden baş elemanı gidiyor ve koyacağız bir betik elemanı ve biz bu komut elemanı kapatmak emin olun Bunun için click olay çene üzerinde bir geçiş toka çağırıyor yaptım beri biz işlevi burada ruh türüne ihtiyacınız işlevin adı geçiş sınıfı açık yakın parantez küme ayracı açılış ve kapanış kıvırcık ayraç Şimdi bu geçiş toka işlevi birinde alıyor argümanı dinamik unsur hangi Bu çalıştırmak için işlevini çağırıyor ve biz sadece EL koyacağım Bu eleman temsil etmek şimdi oldu olay dahil oldu kodunu hatırlıyorum sınıf adını değiştirerek biz sadece yerine o koyabilirsiniz Burada ancak eleman Hussey yaşlı classname hedefleme daha önce çalıştığı gibi yol çalışması bu şimdi sınıf eşittir ama şimdi biz bu almak ve bu unsurların her biri için yere koyabilirsiniz böylece tüm click olayı var ve hepsi açılabilinir ve biz hala burada biraz effin başka koşul deyimi gerekir ve bu çok temel olduğunu ve bu geçiş mantık olacak effin bu geçiş sınıfında koşul deyimi söyler Ben şimdi bu hakkı çalıştırırsanız, örneğin bu derslere geçiş yapılır ama böyle olmaz Onları geri geçiş Ben effin başka koşul deyimi var, çünkü hiçbir koşullu mantığı var benim .. De işlevi henüz mantığı geçiş için çok yerinde bu etsinler eleman sınıf adı sınıfına 1 eşitse Sonra biz başka üzere sınıfa değişecek onu sen hangi varsayılan olarak biz geri sınıfa 1 olacak bir değişiklik onu eğer konum Başka koşul deyimi geçiş mantığı sağlayan şeydir basit kullanarak javascript şey geçiş yapabilirsiniz s ne olsun bakalım şimdi başka koşul deyimi olmuştur Ben bunu kapatmak gerekir şimdi bunu çevirmek Bir kapalı üzerinde mücadele değil Bir off öylesine şimdi biz ikinci örnek olacak bir gösteri sizi konum Biz CSS sınıf A değişiyor nereye tıklanan Bir çocuk ya da a çocuk elemanları bu örnekte gördüğünüz çünkü daha tüm diğer yaktı olabilir ama senaryo nereye olabilir biri yanar ve başka birini tıklatın eğer aydınlandı tane istiyorum Mavi duruma geri dönmek için tüm gitti istemeyebilirsiniz vurgulanır için yapmanız gereken tek seferde vurgulanır istiyorum istediğiniz olabilir tamam İkinci örnekte biz burada ne var ile başlayacak ve ben tüm bu yaptım rap gidiyorum Menü 1 olarak adlandırılan ana sakal Ben bu dört kutu yerinde vardı şimdi tüm fırsatları Menü 1 olarak adlandırılan bu ana gülüm ver gülüm Çocuk işler artık JavaScript erişim tüm bu dinamik kullanmak ben yapacağım şey biliyorum olursa olsun orada kaç Şimdi bir dizi olarak onlara erişim içinde ben üzerinde döngü can ve çene toka geçiş tüm soğuk hareket edecek ilk ben vurgulanan yapmak için gidiyorum yaptım Varsayılan olarak sınıf 2 ile biz tarayıcıda bu bakarsanız bu yüzden Biz varsayılan vurgulanan ilki olan dört kutu olmalı Hepimizin soğuk kaldırıldı çünkü ama hiçbir şey onları henüz tıklayın olmuyorsa zaman Ön geçiş toka gibi şimdi ben bu başlık sınıfta ben istiyorum erişimi içeride dedi Bu ahbaplar bütün bu günlerde erişimi tıklandığında bir dizi olarak tüm bu dinamik yaptım erişmek için, böylece bir dizi olarak böyle bir satırı kullanabilirsiniz yapmak bir değişken çocuklar adlandırılmış ve bu belgeye olsun eşit olacak ve belki kimliği Bu sayı burada yaptığımız bir menü 1 nokta kullanmak bir dizi döndürür çocuklar özelliği menü 1 içinde alt öğeleri rağmen yukarı bu nedenle bu çocuklar değişken tüm çocukları temsil eden bir dizidir menü 1 şimdi benim yürümeye başlayan sınıf içinde mantık sonraki biraz içeride işlev Bu durumda o aşkın döngü İstiyorum olduğunu Çocuklar dizisi ve yapmak tüm sınıfa 1 onları eşit seviyorum olursa olsun tıklandığında ediliyor hangisinin yüzden bu kod biraz yapar o Dört döngüler Çocuklar uzunluğu boyunca oranı ve tüm onları seviyorum yapar sınıfa 1 eşittir ve sonra nihayet dinamik kullanın geliyor tıklandığında ediliyor eleman argümanı sınıfın yalnızca bu bir eşit hale getirmek için Şimdi en o tıklama ile şimdi bize verir ne görelim bir sonraki bu geri mavi gitmek istiyorum ve bu o yeşil açıldığında ve orada bunu şimdi alt öğelerinin arasında takas ettiğin var Diğer ana konteyner eleman Ben bu yüzden size verir İki farklı senaryo tamam böylece değiştirmek için JavaScript nasıl kullanabileceğinizi var Bir geçiş sınıfı, HTML takas sayfadaki öğeleri atanır ve vardır her zaman size gereken bu click olayı bir yüz erkek olmak zorunda değildir olmak zorunda değildir Bir sürükle olay olabilir bir yük olay olabilir scroll olay olabilir Biz sadece biraz bir javascript yardımcı böylece bir çift tıklama olay olabilir Program tarzı bu ihtiyacı bir performans.

Açıklama

Ders Kodu: http://www.developphp.com/video/JavaScript/Change-CSS-Class-Style-className-Toggle-Tutorial Değiştirmek geçiş ve taşıma JavaScript olayı kullanarak takas CSS sınıfları öğrenin.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.9/10

  • 109
    Olumlu
  • 1
    Olumsuz
  • 17
    Yorum
  • 10824
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • BumbleDroid

    BumbleDroid

    18 EKİM 2010
  • Gee Cee

    Gee Cee

    1 AĞUSTOS 2009
  • Watcher3223

    Watcher3223

    15 Kasım 2007

ANKET



Bu sayfa işinize yaradı mı?