Spoilere pentru site-
In timpul procesului, am constatat că acest cod funcționează fără probleme pe site-urile scrise în HTML normal, CMS Satus și WordPress. Dar, destul de sigur pe toate celelalte motoare vor funcționa bine. Deci, începe!
În primul rând, ceea ce este spoilerul? Descrie neinițiaților. Spoilere - un astfel de design care pastreaza continutul site-ului, inițial ascuns pentru utilizator. Cu toate acestea, este deschis pentru motoarele de căutare, nu are nici un efect negativ asupra clasarea site-ului în motoarele de căutare. Când faceți clic pe link-ul dezvăluie conținut ascuns.
De ce se face acest lucru? În general, pentru frumusete ... De exemplu, designul site-ului nu implică plasarea unui text mare pe pagina de start, dar această pagină va fi promovată în motoarele de căutare. Și pentru promovarea anchete serioase, după cum știm, avem nevoie de un text suficient de voluminos pentru o clasare mai bună.
Discuție despre spoilere poate fi o lungă perioadă de timp, dar cum se spune, mai bine să vezi o dată decât să auzi de o sută de ori. A se vedea exemplele de mai jos eleronul.
EXEMPLUL spoiler. Faceți clic pe link-ul ...
Aici este textul, imaginile sau alt conținut.
Să mergem. Codul de mai jos, trebuie să fie plasat între etichetele
, în cazul în care spoilerul pentru a fi utilizat pe mai multe pagini. Dacă nu, atunci pur și simplu introduceți-l în corpul paginii unde spoilerul va fi disponibil (așa cum am făcut pe această pagină). Deci, codul:Un antet și spoiler este plasat în codul următor:
În principiu, totul este de lucru, dar nu destul de modul în care ar fi necesar. Dacă introduceți doar codurile prezentate mai sus, conținutul spoilerul se va deschide imediat. Pentru a scăpa de această „boală“ ar trebui să fie în css (foaia de stil în cascadă) pentru a adăuga următoarele:
afișare div.text div.spoiler: nici unul;
>
Ei bine, practic ați terminat! Dacă ai făcut totul așa cum scrie aici, spoiler vor funcționa fără probleme. Dacă aveți probleme, vă rugăm e-mail!
Toți parametrii stiluri necesare prevede aici:
div.name div.spoiler // stiluri de antet
div.text div.spoiler // stiluri pentru conținutul principal
Gata! Atenție!
Avem nevoie pentru a schimba script-ul un pic și se adaugă câteva reguli în css.
Iată un script modificat:
$ (Document) .ready (funcția () $ ( "durata div.spoiler div.name"). Toggle (function () $ (aceasta) .parent ( "div.name"). Parent ( "div.spoiler") . .children ( "div.text") arată ();
$ (Aceasta) .parent ( "div.name") css ( "backgroundPosition", "0 0") .;
>, Function () $ (aceasta) .parent ( "div.name") părinte ( "div.spoiler") pentru copii ( "div.text") ascunde () ...;
$ (Aceasta) .parent ( "div.name") css ( "backgroundPosition", "0 -27px") .;
>);
>);
Și aici css:
.spoiler padding-left: 20px;
>
div.spoiler înălțime div.name: 27px;
cursor: pointer;
text-decoration: subliniază;
culoare: # 003399;
fundal: url ( "imagini ../ / spoiler.jpg") fără repetare 0 -27px;
padding-left: 25px;
>
afișare div.text div.spoiler: nici unul;
padding: 10px 10px 25px 0px;
>
Pentru a depune spoiler.jpg specifica în mod corect calea, am această dimensiune sprite 12h54, iar din acest -27px în codul din imagine minus partea de sus, plus partea de jos.
„Toți parametrii stilurile necesare prevede aici:
div.name div.spoiler // stiluri de antet
div.text div.spoiler // stiluri pentru conținutul principal "
Nu pot să dau seama unde este de a prescrie? Doar nu înțeleg în cazul în care să se înregistreze fraza în care eleronul implicit este închis?
același cod pe care le-a dat.
$ (Document) .ready (funcția () $ ( «div.spoiler interval div.name»). Toggle (function () $ (aceasta) .parent ( «div.name»). Parent ( «div.spoiler») .children ( «div.text») arată () .;
$ (Aceasta) .parent ( «div.name») ascendenți ( «div.spoiler») css ( «backgroundPosition», »-15px 0" ) ..;
>, Function () $ (aceasta) .parent ( «div.name») ascendenți ( «div.spoiler») pentru copii ( «div.text») ascunde () ...;
$ (Aceasta) .parent ( «div.name») părinte ( «div.spoiler») css ( «backgroundPosition», »0 -15px») ..;
>);
>);
Asta e modul în care-l folosesc.
(Franța) - Pernod / Pernod
0,7 sticlă de un litru. 2800 freca. Porție 50 ml. 200 ruble.
Asta e despre pisyvaya în CSS pe care doriți să-mi clasă:
div.opisanie div.spoiler
și nu funcționează.
După cum a declarat în scenariu?
Am înțeles că ați textul spoiler este închis într-un div Slassi «opisanie»? Dacă este așa, atunci într-un script, schimba aici: div.text la aici este: div.opisanie
Vă mulțumim pentru spoller. Doar am nu stranatse bine în bloc, și nu arata foarte bine ((
Poate că este în valoare de un pic de stiluri de nivel atras la ea a fost frumos?
Vă mulțumesc, salvați o mulțime de timp - o decizie pe cont propriu ar fi fost în căutarea unui lungă perioadă de timp)) totul funcționează bine)
Multumesc pentru spoilerul! De ce aveți nevoie. Totul funcționează.
Doar spune-mi cum să fac asta este închis, nu numai făcând clic pe antetul unui spoiler, dar atunci când faceți clic oriunde pe pagină, în plus față de spoiler.
În plus, aș dori să văd când faceți clic pe un alt spoiler (am câteva pe pagină), celălalt atunci când este deschis - închis.
$ ( "Div.spoiler div.name durata"). Toggle (function ()
Schimbul de aici interval div
EXEMPLUL spoiler. Faceți clic pe link-ul ...
și aici.
Întreabă-l, de asemenea, parametrii adecvați pentru lățime și înălțime. De exemplu, 100% și 40px