Moi!
Mitenkä onnistuisi sellainen HTMLlä ja CSSllä, että kun osoite kentässä on #jotakin, niin sivulla näkäyisi vaikka divin nayta kohdalla tuon divin jotakin siinä tilalla. Onnistuuko pelkästään HTML ja CSS? vai vaatiiko, muita? PHP tai JS?
Säästät sanoja.
Ei tuosta ota meidän Erkki selvää. Kerro tarkemmin.
Pelkällä HTML:llä ja CSS:llä ei voi muuttaa sivun sisältöä osoitteen mukaan. JavaScriptilla sen sijaan osoitteen #-osan voi lukea muuttujasta location.hash, ja sen perusteella voi helposti näyttää tai piilottaa eri osia.
<script>
function nayta(id) {
var arr = document.querySelectorAll("#sisalto > div");
for (var i = 0; i < arr.length; ++i) {
if (arr[i].id == id) {
arr[i].classList.remove("piilossa");
} else {
arr[i].classList.add("piilossa");
}
}
}
function nayta_hash() {
if (!location.hash.match(/^#\S+$/) || !document.querySelector("#sisalto > div" + location.hash)) {
return false;
}
nayta(location.hash.substring(1));
return true;
}
document.addEventListener("DOMContentLoaded", function() {
if (!nayta_hash()) {
location.hash = "#s1";
nayta_hash();
}
setInterval(nayta_hash, 100);
});
</script>
<style>
.piilossa {
display: none;
}
</style>
<p><a href="#s1">1</a> <a href="#s2">2</a> <a href="#s3">3</a></p>
<div id="sisalto">
<div id="s1">Lorem ipsum…</div>
<div id="s2">…dolor sit amet…</div>
<div id="s3">…consectetur adipiscing elit.</div>
</div>Metabolix kirjoitti:
Pelkällä HTML:llä ja CSS:llä ei voi muuttaa sivun sisältöä osoitteen mukaan.
No ei aivan totta siinä mielessä, että jonkinlaisia efektejä voi kuitenkin kirjoitella, joilla saa sisältöä piiloon ja näkyviin. Siitähän tässä lähinnä on kyse. Hakukoneystävällistä tämä ei kyllä ole ja toimii vain yhteen widgettiin kerrallaan.
http://jsfiddle.net/j99dt/ [pure html + css]
Totta, en muistanut :target-pseudoluokkaa. Sillähän onnistuu tuo sama, joka edellisessä koodissani tehdään.
<style>
#sisalto > div:not(:target) {
display: none;
}
</style>
<p><a href="#s1">1</a> <a href="#s2">2</a> <a href="#s3">3</a></p>
<div id="sisalto">
<div id="s1">Lorem ipsum…</div>
<div id="s2">…dolor sit amet…</div>
<div id="s3">…consectetur adipiscing elit.</div>
</div>Kuitenkin JavaScriptin käytöstä on eräitä etuja: sillä voi esimerkiksi näyttää ja piilottaa useampia elementtejä samalla kertaa ja lisätä jonkin sulavan efektin.
Kiitos molemmille hyvistä vastauksista! Tästä oli suuri apu, kun en löytänyt Googlella mitään..... kiitos!
Metabolix kirjoitti:
Kuitenkin JavaScriptin käytöstä on eräitä etuja: sillä voi esimerkiksi näyttää ja piilottaa useampia elementtejä samalla kertaa ja lisätä jonkin sulavan efektin.
Onnistuu pelkällä CSS:llä. Mutta rajoittaa valtavasti HTML:n rakennetta, joten kannattaa kytkeä JS:llä luokkien kautta. Ja sittenkään ei kannata kiertää kaikkien elementtien läpi yksi kerrallaan, vaan muuttaa yhdestä paikkaa yhden luokan ja antaa CSS-magioiden hallita mitä näkyy ja miten näkyy.
Koodit jälkimmäiselle linkille vielä alle, niin eivät katoa:
<ul> <li id="yksi"><a href="#yksi">Yksi</a></li> <li id="kaksi"><a href="#kaksi">Kaksi</a></li> <li id="kolme"><a href="#kolme">Kolme</a></li> <li><a href="#">Pois</a></li> </ul> <div class="hash"> <div class="valitse">Valitse jokin yltä</div> <div class="yksi">Yksi</div> <div class="yksi">Yksi</div> <div class="kaksi">Kaksi</div> <div class="kaksi">Kaksi</div> <div class="kaksi">Kaksi</div> <div class="kolme">Kolme</div> </div>
.valitse {
background: #EEE;
height: 50px;
overflow: hidden;
transition: height .5s ease-in-out;
}
.hash:not([class='hash']) .valitse {
height: 0;
}
.yksi,.kaksi,.kolme {
line-height: 0.00001;
opacity: 0;
overflow: hidden;
padding: 0;
transition: opacity .5s ease-in-out,line-height .5s ease-in-out,padding .5s ease-in-out;
}
.yksi {
background: #FDD;
}
.kaksi {
background: #DFD;
}
.kolme {
background: #DDF;
}
.hash--yksi .yksi,
.hash--kaksi .kaksi,
.hash--kolme .kolme {
line-height: 2;
opacity: 1;
padding: 1em;
}(function(d, w) {
var hash,
hashPrefix = 'hash--',
hashClass,
onhashchange = function onhashchange() {
var newHashClass = d.location.hash.slice(1);
if(hash && hashClass !== newHashClass) {
if(hashClass) {
hash.classList.remove(hashPrefix + hashClass);
}
hashClass = newHashClass;
if(hashClass) {
hash.classList.add(hashPrefix + hashClass);
}
}
};
d.addEventListener('DOMContentLoaded', function() {
hash = d.querySelector('.hash');
onhashchange();
});
w.addEventListener('hashchange', onhashchange);
})(document, window);Aihe on jo aika vanha, joten et voi enää vastata siihen.