Som začiatočník javascriptu. Pre tento projekt tu nemôžeme použiť jQuery. Páči sa mi, že v pravom dolnom rohu fungujú pravouhlé 4 bunky ako miniatúry a pri vznášaní sa zobrazia rôzne obrázky.
<div id="resistorContent">
<section id="resistorDetail1" class="1stdetailContent"><img src="/images/http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" alt=""></section>
<section id="resistorDetail2" class="detailContent"><img src="/images/http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" alt=""></section>
<section id="resistorDetail3" class="detailContent"><img src="/images/http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" alt=""></section>
<section id="resistorDetail4" class="detailContent"><img src="/images/http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" alt=""></section>
<span class="closeButton"><a id="close" onclick="hideContent("resistorContent")">X</a></span>
<ul>
<li onmouseover="showDetailContent("resistorDetail1")" onmouseout="hideDetailContent("resistorDetail1")"></li>
<li onmouseover="showDetailContent("resistorDetail2")" onmouseout="hideDetailContent("resistorDetail2")"></li>
<li onmouseover="showDetailContent("resistorDetail3")" onmouseout="hideDetailContent("resistorDetail3")"></li>
<li onmouseover="showDetailContent("resistorDetail4")" onmouseout="hideDetailContent("resistorDetail4")"></li>
</ul>
</div>
</section>
<script type="text/javascript">
function showDetailContent(target) {
document.getElementById(target).style.display = "block";
}
function hideDetailContent(target){
document.getElementById(target).style.display = "none";
}
</script>
Rád robím nejaké vylepšenia, pretože na tieto bunky sa teraz spolieha onmouseout
ktoré vypínajú prepojené <section>
takže môže načítať ďalšie <section>
, Ak presuniem myš z buniek, zobrazí sa prázdna stránka.
Ako napíšem javascript, aby zostal aktuálny <section>
a načítať iba druhý <section>
keď sa vznášate nad ostatnými bunkami?
Vopred ďakujem
http://jsfiddle.net/63L72trx/10/
odpovede:
1 pre odpoveď č. 1Poďme si rozobrať, čo chcete urobiť, do jednoduchej vety:
„Keď zobrazujem ďalšiu položku, chcem skryť ďalšie položky, ktoré sa môžu alebo nemusia zobraziť.“
Takže, poďme odstrániť onmouseout
ktorý skryje prvky a vynúti stav resetovania, ktorý zaistí, že všetky položky budú skryté vždy, keď ukážeme niektorú z našich položiek onmouseover
.
<div id="resistorContent">
<section id="resistorDetail1" class="1stdetailContent"><img src="/images/http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" alt=""></section>
<section id="resistorDetail2" class="detailContent"><img src="/images/http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" alt=""></section>
<section id="resistorDetail3" class="detailContent"><img src="/images/http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" alt=""></section>
<section id="resistorDetail4" class="detailContent"><img src="/images/http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" alt=""></section>
<span class="closeButton"><a id="close" onclick="hideContent("resistorContent")">X</a></span>
<ul>
<li onmouseover="showDetailContent("resistorDetail1")"></li>
<li onmouseover="showDetailContent("resistorDetail2")"></li>
<li onmouseover="showDetailContent("resistorDetail3")"></li>
<li onmouseover="showDetailContent("resistorDetail4")"></li>
</ul>
</div>
</section>
<script type="text/javascript">
var children = document.querySelectorAll("#resistorContent > section[id]");
function showDetailContent(target) {
// Simply loop over our children and ensure they are hidden:
for (var i = 0, child; child = children[i]; i++) {
child.style.display = "none";
}
// Now, show our child we want to show
document.getElementById(target).style.display = "block";
}
</script>
Tu je pracovná husle: http://jsfiddle.net/rgthree/63L72trx/12/