I have a bit of
JS which sets divs with a certain class to display:none; and then when one is clicked it set that one (the div that link is linked to) to display: block; but all the others to display: none; So essentialy it swaps them.
My problem is that I would like the very first div to actually be displayed when the page is loaded and I wondered how I would achieve this. As it is all of my divs are hidden when the page loads.
Below is the relevant
HTML:
- Code: Select all
<div id="primary_services">
<h1>Services<h1>
<div class="section" id="intro">
<h2>Introduction</h2>
<p>Summarizing my experience of my week in Austin, TX for South by
Southwest is a difficult task. This was my first time attending,
and it’s been physically, emotionally, and mentally
exhausting/invigorating.</p>
<p>I’d rather not go through point by point my thoughts on every
single experience, but I will point out some general thoughts.</p>
</div>
<div class="section" id="web">
<h2>Web</h2>
<p>Summarizing my experience of my week in Austin, TX for South by
Southwest is a difficult task. This was my first time attending,
and it’s been physically, emotionally, and mentally
exhausting/invigorating.</p>
<p>I’d rather not go through point by point my thoughts on every
single experience, but I will point out some general thoughts.</p>
</div>
<div class="section" id="print">
<h2>Print</h2>
<p>Summarizing my experience of my week in Austin, TX for South by
Southwest is a difficult task. This was my first time attending,
and it’s been physically, emotionally, and mentally
exhausting/invigorating.</p>
<p>I’d rather not go through point by point my thoughts on every
single experience, but I will point out some general thoughts.</p>
</div> <div class="section" id="identity">
<h2>Identity</h2>
<p>Summarizing my experience of my week in Austin, TX for South by
Southwest is a difficult task. This was my first time attending,
and it’s been physically, emotionally, and mentally
exhausting/invigorating.</p>
<p>I’d rather not go through point by point my thoughts on every
single experience, but I will point out some general thoughts.</p>
</div>
</div>
And the
JS so far:
- Code: Select all
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function showSection(id) {
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++ ) {
if (divs[i].className.indexOf("section") == -1) continue;
if (divs[i].getAttribute("id") != id) {
divs[i].style.display = "none";
} else {
divs[i].style.display = "block";
}
}
}
function prepareInternalnav() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("services")) return false;
var nav = document.getElementById("services");
var links = nav.getElementsByTagName("a");
for (var i=0; i<links.length; i++ ) {
var sectionId = links[i].getAttribute("href").split("#")[1];
if (!document.getElementById(sectionId)) continue;
document.getElementById(sectionId).style.display = "none";
links[i].destination = sectionId;
links[i].onclick = function() {
showSection(this.destination);
return false;
}
}
}
addLoadEvent(prepareInternalnav);
As you can see my mark-up is free of any
JS so I'm not looking for solutions that involve inline
JS. There is probably a pretty simple solution but it eludes me. Would it work if I added a new class to the first div and then basically said if a dive has this new class then it should display: block; ? would something this simple work?
Hope you can help.
Pete.
