Javascripti dekoderdən necə gizlətmək olar. JavaScript istifadə edərək html-də mətn parçasını və ya şəkli necə göstərmək və gizlətmək olar. javascript nədir
Həmçinin oxuyun
Təsvir: Bütün səhifə məzmununu bir anda göstərmək istəmədiyiniz vəziyyətlər var. Məsələn, "FAQ" bölməsində yalnız sualların adlarını göstərin. Və əgər insan müəyyən bir sualın cavabı ilə maraqlanırsa, o zaman cavabı aça bilər, baxdıqda isə onu bağlaya bilər. Bu, səhifəni rahat və yığcam edir. Və bunun üçün müəyyən mətni (ümumiyyətlə müəyyən elementləri) açmağa və ya gizlətməyə, yəni JavaScript-də gizli mətn yaratmağa imkan verən sadə JavaScript skripti hazırladım.
Nəticə: Sualın başlığına klikləyin. Yenidən klikləsəniz, cavab yenidən bağlanacaq.
Sual 1Cavab №1.
Sual № 2Cavab №2.
JavaScript kodu (teqlər arasına daxil edin):
funksiyanın genişləndirilməsi(id)(
obj = document.getElementById(id);
əgər (obj.style.display=="heç biri") obj.style.display="";
else obj.style.display="heç biri";
}
HTML kodu (teqlər arasına daxil edin):
Sual 1
Cavab №1.
Sual № 2
Cavab №2.
Salam oxucu.
Bu qısa məqalədə sizə onlayn mağaza üçün kateqoriyaları necə düzgün optimallaşdıracağınızı söyləmək istəyirik.
Mətni optimallaşdırmağa başlayanda ilk növbədə səhifəni maksimum uyğunluq üçün quraşdırırıq. Bunu necə etmək olar.
Ancaq bu vəziyyətdə tez-tez aşağıdakı problem yaranır - çox mətn əlavə etmək lazımdır və bu saytın dizaynına uyğun gəlmir.
Buna görə də, mətnin bir hissəsini istifadəçilərdən gizlətmək lazımdır, lakin birdən ziyarətçi onu oxumaq istəsə, o zaman asanlıqla aça bilər.
“Rozetka” onlayn hipermarketində maraqlı həll tətbiq edilib. Budur kateqoriyalara bir nümunə:
Bu linkə tıkladığımız zaman səhifəni yenidən yükləmədən tam təsvir açılır. Eyni həlli həyata keçirmək istəyirsinizsə, aşağıda bunun praktikada necə həyata keçirildiyini təsvir edirik.
Bu məqam JavaScript proqramlaşdırma dili sayəsində həll edilə bilər.
JavaScript əvvəlcə veb səhifələri "canlı" etmək üçün yaradılmışdır.
Veb səhifənin mətnində JavaScript skriptlərini quraşdırmaq üçün siz deskriptoru daxil etməlisiniz. JavaScript kodu teqlər arasında yerləşir. Kod həm səhifə başlığının mətnində (teqlər arasında), həm də səhifənin mətnində (teqlər arasında) yerləşdirilə bilər.
Skriptin işləməsi üçün saytın istənilən hissəsində istifadə olunacaq funksiya yaratmalısınız. sh() funksiyasından istifadə edəcəyik
sh();
sh() funksiyası
info = document.getElementById("info");
düymə = document.getElementById("düymə");
əgər (info.style.display == "heç biri") (
info.style.display = "blok";
button.style.display = "heç biri";
}
}
Skriptin işini onun üzərində göstərmək üçün onu bu formada göstərilən yerə qoymaq lazımdır
Daha çox oxu...
GİZLƏNƏCƏK MƏTN
sh() funksiyası burada çağırılır
Gizli mətni kodda defolt olaraq açıq etmək üçün displey:none-i display:block olaraq dəyişin
Funksiyanı mətnə tətbiq etdikdən sonra baş verənlərə bir nümunə:
Bu nümunədə, saytı tanıtmaq üçün yazılmış 3000 simvol SEO mətni səhifədə gizlədilib. Linkə kliklədiyiniz zaman “Daha ətraflı...” linkinin özü funksiyada göstərilən style.display xüsusiyyəti sayəsində yox olacaq.
Beləliklə, bu funksiyanı həyata keçirə bilərsiniz. Hər hansı bir sualınız varsa, şərhlərdə soruşun.
Bu kiçik javascript sizə lazım gələrsə, linkə kliklədiyiniz zaman mətn və şəkillərin fraqmentlərini gizlətməyə və göstərməyə imkan verəcək. Bir çox insanın bildiyi çox mənasız şeyləri təsvir etmək istədiyiniz zaman bu lazım ola bilər. Əksər oxucuların bu məlumatdan yayınmaması üçün onu yalnız linkə kliklədiyiniz zaman təqdim edin. Eyni şəkildə, bir şəkil və ya ümumiyyətlə hər hansı bir fraqmenti gizlədə bilərsiniz. Və ya müəyyən bir sualın üzərinə kliklədiyiniz zaman konkret cavabın açıqlanacağı bir anket tətbiq edin.
Əvvəlcə bir nümunə, sonra ssenari və izahat verəcəyəm.
Nümunə Kodu:Bu həmişə işləyəcək?
Çəhrayı filə baxın
İstifadəçi öz brauzerində javaskriptlərin istifadəsini bilərəkdən söndürməsə, işləyəcək. Qalereyaları və effektləri olan bütün müasir Wodpress mövzuları JavaScript-in köməyi ilə işləyir. Və bir çox müasir saytlar bu texnologiyadan istifadə edir.
SkriptBizə kiçik show_hide() funksiyası lazım olacaq.
show_gide(obj_id) funksiyası (
doc= document.getElementById(obj_id) ;
if(doc.style .display == "heç biri" ) doc.style .display = "blok" ;
else doc.style .display = "heç biri"
}
WordPress üçün show_hide() funksiyası header.php faylında bağlanan teqdən və teqlərdən əvvəl yerləşdirilə bilər. Və ya onu daxil edilmiş js faylına yerləşdirin.
Daha ətraflı
Və biz gizli fraqmenti div-ə yerləşdiririk
Təfərrüatlar
Gizli fraqment öz div-inə səhifə daxilində unikal id (burada id="detail" ) və displey:none üslubu ilə (brauzerə məzmunu göstərməməyi bildirir) əlavə edilməlidir. Səhifə yükləndikdə, bu gizli fraqment brauzerə yüklənəcək, axtarış motorları tərəfindən indeksləşdiriləcək, lakin istifadəçi bilərəkdən show_hide funksiyamıza zəngin yazıldığı Ətraflı məlumat linkinə klikləyənə qədər gizlədiləcək. Gizlənəcək div-in id dəyəri funksiyaya parametr kimi ötürülür. Funksiya ekran xassəsini heç biridən blok və geriyə dəyişir. Bu, fraqmentin div-də göstərilməsinə və gizlədilməsinə gətirib çıxarır.
Şəkil vəziyyətində, başqa bir pəncərədə şəkli göstərməklə hələ də javascript-i deaktiv edən bir neçə istifadəçinin qayğısına qala bilərsiniz. Şəklin ünvanını bilirik. Beləliklə, formanın şəklinə keçid:
Çəhrayı filə baxın
Bunu belə yenidən yazmaq daha yaxşıdır:
JavaScript aktivdirsə, heç bir dəyişiklik görməyəcəksiniz. Ancaq əlil olduqda, qırıq bir əlaqə əvəzinə yeni bir pəncərədə bir şəkil açılacaqdır.
Veb səhifələrin brauzerinizdə tam və optimal işləməsi üçün javascript aktiv olmalıdır.
Bunun nə olduğunu və onu necə aktivləşdirəcəyini bu məqalədə sizə xəbər verəcəyik.
Pivot Cədvəli Javascript nədir?
JavaScript-i çoxparadiqmalı dil adlandırmaq olar. Bir çox proqramlaşdırma metodlarını dəstəkləyir. Məsələn, obyekt yönümlü, funksional və imperativ.
Bu tip proqramlaşdırma birbaşa java ilə əlaqəli deyil. Bu proqramlaşdırma dilinin əsas sintaksisi C dili ilə yanaşı, C++ dilidir.
Brauzer veb səhifələrinin əsasını proqramçılar səhifələrə müxtəlif interaktiv elementlər əlavə edən HTML kodu təşkil edir.
Brauzerdə javascript deaktiv edilərsə, interaktiv elementlər işləməyəcək.
Bu tip proqramlaşdırma dili Sun Microsystems və Netscape-in birgə işi sayəsində meydana çıxdı.
Əvvəlcə JavaScript LiveScript adlanırdı, lakin Java dili proqramçılar arasında populyarlaşdıqdan sonra inkişaf şirkətləri onun adını dəyişməyə qərar verdilər.
Netscape-in marketinq departamenti belə bir adın yeni proqramlaşdırma dilinin populyarlığını artıracağına inanırdı və bu, əslində baş verdi.
Nəzərinizə çatdıraq ki, JavaScript birbaşa Java ilə əlaqəli deyil. Bunlar tamamilə fərqli dillərdir.
JavaScript XüsusiyyətləriBu proqramlaşdırma dili çox yönlü olduğuna görə qeyri-məhdud sayda imkanlara malikdir.
Tətbiqin əsas aspektləri smartfonlar üçün mobil proqramlar, saytların və xidmətlərin interaktiv veb səhifələridir.
Yeniliyin böyük hissəsi bu gün dildə istifadə olunan xüsusiyyətləri təmin edən layihəyə qoşulan AJAX şirkəti tərəfindən gətirildi.
Trafikə qənaət etmək və istifadənin asanlığını artırmaq üçün JavaScript sayt və xidmətlərin səhifələrini onlayn istifadəçinin diqqətindən yayınmadan kiçik hissələrdə dəyişmək imkanı verir.
Bu, redaktə edərkən və ya yeni məlumat əlavə edərkən saytın bağlanmasını tələb etmir.
Dəyişikliklər səhifənin yenilənməsi və ya yenidən yüklənməsi tələb olunmadan dərhal baş verir.
JavaScript funksiyası müxtəlif səbəblərdən söndürülə bilər.
Mümkündür ki, əvvəlki istifadəçi onu qəsdən söndürmüş ola bilər, çünki bu, internetə baxmaq üçün tələb olunmur. Bağlanma öz-özünə də baş verə bilər.
Javascript-i söndürmək bəzi linklərin açılmasına mane ola bilər. Aşağıda məşhur brauzerlərdə bu funksiyanı aktivləşdirməyin yollarına baxacağıq.
Yandex brauzeri22 və daha aşağı versiyalarda JavaScript funksiyasını aktivləşdirmək üçün alətlər panelinə keçin və "Parametrlər" menyusunu seçin.
Javascript-i aktivləşdirmək üçün “Məzmun” bölməsinə keçin, burada funksiyanı aktivləşdirmək üçün “JavaScript-dən istifadə et” qutusunu qeyd etməlisiniz.
Funksiyanı söndürmək üçün bu qutunun işarəsini silməlisiniz.
Dəyişiklikləri saxlamaq üçün "OK" düyməsini basın və brauzer səhifəsini yeniləyin.
Dəyişikliklərin qüvvəyə minməsi üçün brauzeri yenidən başlatmağa ehtiyac yoxdur. Aktivləşdirildikdən sonra siz internet səhifələrinə tam baxa və interaktiv xidmətlərdə hərəkətlər edə biləcəksiniz.
Opera versiyaları 10.5-dən 14-ə qədərƏvvəlcə brauzer parametrlərini açmalıyıq.
Yuxarı sol küncdə "Menyu" düyməsini basın, kontekst menyusunda kursoru "Parametrlər" maddəsinə aparın və "Ümumi parametrlər ..." alt elementini vurun.
Bundan sonra brauzer parametrləri ilə yeni bir pəncərə açılacaqdır.
Bunun içərisində "Qabaqcıl" sekmesini seçməlisiniz.
Nişanın sol menyusunda "Məzmun" maddəsini vurun, bundan sonra "JavaScript-i aktivləşdirin" və "Java-nı aktivləşdirin" maddələrində iki onay qutusunu yoxlayaraq funksiyanı aktivləşdiririk.
Deaktiv etmək üçün bu onay qutularının işarəsi götürülməlidir.
Opera versiyalarında 10.5-dən 14-ə qədər javascript-in aktivləşdirilməsi və deaktiv edilməsi
Qutuları yoxladıqdan və ya işarəni sildikdən sonra "OK" düyməsini sıxaraq dəyişiklikləri yadda saxlayın.
İndi dəyişikliklərin qüvvəyə minməsi üçün brauzeri yenidən başladın. Bütün javascript funksiyaları sizin üçün əlçatan olacaq.
15 və daha yüksək versiyalarOpera brauzerinin bu versiyalarında JavaScript-in aktivləşdirilməsi daha sadədir.
Parametrlər pəncərəsini açmaq üçün açıq brauzerdə Alt + P isti düymələr birləşməsini sıxmalısınız. Açılan menyuda "Saytlar" sekmesini açın.
Funksiyanı aktivləşdirmək üçün "JavaScript-in icrasına icazə ver", onu söndürmək üçün isə "JavaScript icrasını qadağan et" qutusunu qoymalısınız.
Bundan sonra dəyişiklikləri saxlamaq və baxdığınız səhifəni F5 düyməsi ilə və ya ünvan çubuğunun sol tərəfindəki müvafiq işarəyə klikləməklə təzələmək üçün “OK” düyməsini sıxmağınız kifayətdir.
Brauzeri yenidən başlatmağa ehtiyac yoxdur.
SafariApple mülkiyyət brauzerində JavaScript funksiyasını aktivləşdirmək üçün parametrlərə keçməlisiniz.
Onları açmaq üçün "Safari" düyməsini basmalı və "Parametrlər" i seçməlisiniz.
HTML-də lazımsız elementləri gizlətmək üçün bir çox variant var. Bu yazıda bunun CSS, JavaScript və ya jQuery istifadə edərək necə edilə biləcəyinə baxacağıq. Başqa seçimləriniz varsa, şərhlərdə yazın.
CSSCSS-də elementi gizlətmək üçün bir çox fərqli yol var. Aşağıda bunun ən çox necə edildiyinə dair nümunələr verilmişdir.
Sinif adına görə gizlədinHTML nümunəsi
bu bloku gizlətmək lazımdır
CSS nümunəsi
Yan panel (ekran: heç biri;)
.
ID ilə gizlədinHTML nümunəsi
bu bloku gizlətmək lazımdır
CSS nümunəsi
#yan panel (ekran: heç biri;)
Yuxarıdakı kod səhifədəki bütün elementləri ilə gizlədəcək.
Digər atributlarla gizlədinElement üçün id və ya sinifiniz yoxdursa, onu hələ də gizlədə bilərsiniz. Alternativ olaraq, aşağıdakı nümunədə göstərildiyi kimi digər atributlardan da istifadə edilə bilər.
HTML nümunəsi
Link
CSS nümunəsi
Konteyner div:nth-child(2) (ekran: heç biri) .
Konteyner div:nth-child(2) ikinci div-i.container blokunun içərisində gizlədəcək.
div "salam-dünya" dəyəri ilə data-id atributlarına malik olan bütün div elementlərini səhifədən gizlədəcək, bunu qeyd etsəniz, nəinki div elementləri gizlənəcək, həm də bütün elementlər belə bir elementin olub-olmadığı yoxlanılacaq. atribut və dəyər.
Siz həmçinin digər CSS xassələri olan elementi silə bilərsiniz, məsələn:
Yan panel (ekran: heç biri; qeyri-şəffaflıq: 0; z indeksi: -999; görünmə: gizli; en: 0; hündürlük: 0; mövqe: mütləq; sol: -9999; yuxarı: -9999; )
Yuxarıdakı nümunədən CSS xassələrinin təsviriqeyri-şəffaflıq: 0 - şəffaflığı 0-a təyin edir, beləliklə, element ümumiyyətlə səhifədə göstərilməyəcək, onu yenidən göstərmək üçün 0,1 (elementin görünmə qabiliyyətinin 10%), 0,2, ... 1 təyin etməlisiniz.
z-index: -999 - Qatın yerini təyin edir. Rəqəm nə qədər böyükdürsə, gizlətmək istədiyiniz element digər təbəqələrin üstündə yerləşəcək. Məsələn, əgər layer.sidebar-da z-indeksi varsa: 999 və layer.container-in z-index: 100 varsa, hətta bu təbəqələri bir-birinin üstünə qoysanız belə, .sidebar yenə də yuxarıda göstəriləcək. .konteyner, indeksi olduğundan daha yüksəkdir.
görünürlük: gizli - göstərmək üçün oxşar xüsusiyyət: heç biri
en: 0; hündürlük: 0; — əgər siz onları sıfıra təyin etsəniz, elementinizin hündürlüyü və eni 0 olacaq, buna görə də o, ümumiyyətlə ekranda görünməyəcək.
mövqe: mütləq; sol: -9999; yuxarı: -9999 - bu halda element istifadəçinin ekranından kənara çıxacaq və bununla da səhifədə görünməyəcək
jQuerySəhifədəki elementlər jQuery istifadə edərək də gizlənə bilər. Xüsusiyyətlərindən istifadə etməyə başlamazdan əvvəl jQuery kitabxanasını quraşdırmalısınız.
Elementlərə CSS-də olduğu kimi daxil ola bilərsiniz. CSS ilə problem ondan ibarətdir ki, yalnız elementləri gizlətmək üçün istifadə edilə bilər.
jQuery elementləri silməyə imkan verir ki, hətta səhifənin mənbə koduna baxarkən belə görünməsin.
Sinif (sinif) istifadə edərək elementi silinAşağıdakı skript yan panel sinfi olan səhifədən bütün elementləri siləcək.
HTML nümunəsi
Mətn
jQuery nümunəsi
$(funksiya() ( $(sənəd).ready(funksiya() ( $(".kenar panel").Remove(); )); ));
ID istifadə edərək elementi silinAşağıdakı skript id yan panelli səhifədən elementi silir.
HTML nümunəsi
Mətn
jQuery nümunəsi
$(funksiya() ( $(sənəd).ready(funksiya() ( $("#kenar panel").Remove(); )); ));
Elementi atributla silin$(funksiya() ( $(sənəd).ready(funksiya() ( $("a").Remove(); )); ));
Bu yolla siz səhifədəki hər şeyi silə bilərsiniz.
JavaScriptJavaScript özlüyündə çox güclüdür, lakin çox adam ondan necə istifadə edəcəyini bilmir, çünki dil təcrübəsiz bir tərtibatçı üçün olduqca mürəkkəbdir. Aşağıda JavaScript istifadə edərək elementləri necə gizlədə biləcəyinizlə bağlı bir neçə nümunə yazdım.
Sinifdən istifadə edərək elementi silinHTML nümunəsi
Mətn
JavaScript nümunəsi
document.getElementsByClassName("yan panel").remove()