JavaScript and client side scripting.
Moderator: General Moderators
Toneboy
Forum Contributor
Posts: 102 Joined: Wed Jul 31, 2002 5:59 am
Location: Law, Scotland.
Contact:
Post
by Toneboy » Fri Dec 17, 2004 3:30 am
Finally found a script that switches between "tabs". Got it working on my
Archives Index (down at the bottom of the page).
Does anyone know how to make a slight adjustment to it so that it will show the first <div> section automatically when the page loads? I'm guessing that you switch the .style.display = 'none' to something else, but wasn't sure, so I thought I'd ask.
Here's the current code:
Code: Select all
<script language="Javascript" type="text/javascript">
function show_div(div_id) {
// hide all the divs
document.getElementById('div_1').style.display = 'none';
document.getElementById('div_2').style.display = 'none';
document.getElementById('div_3').style.display = 'none';
// show the requested div
document.getElementById(div_id).style.display = 'block';
}
</script>
<b>Thoughts:</b> <a href="#" class="cursor" onclick="show_div('div_1'); return false;">Latest</a> |
<a href="#" class="cursor" onclick="show_div('div_2'); return false;">Classic</a> |
<a href="#" class="cursor" onclick="show_div('div_3'); return false;">Your Favourites</a>
<div style="display: none;" id="div_1"><a href="showthought.php?d=13&&m=12&&y=2004">13th December 2004</a><br />
Tony Dobson suggests how you can survive a Christmas dip at work.</div>
<div style="display: none;" id="div_2"><a href="showthought.php?d=3&&m=1&&y=2000">3rd January 2000</a><br />
Neil Taylor heralds a new millennium.</div>
<div style="display: none;" id="div_3">Coming soon!</div>
Any help much appreciated.
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098 Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia
Post
by Chris Corbyn » Fri Dec 17, 2004 7:15 am
Make sure all the other div's are set to style="display:none" and then set the first div sto style="display:block"
Code: Select all
<script language="Javascript" type="text/javascript">
function show_div(div_id) {
// hide all the divs
document.getElementById('div_1').style.display = 'none';
document.getElementById('div_2').style.display = 'none';
document.getElementById('div_3').style.display = 'none';
// show the requested div
document.getElementById(div_id).style.display = 'block';
}
</script>
<b>Thoughts:</b> <a href="#" class="cursor" onclick="show_div('div_1'); return false;">Latest</a> |
<a href="#" class="cursor" onclick="show_div('div_2'); return false;">Classic</a> |
<a href="#" class="cursor" onclick="show_div('div_3'); return false;">Your Favourites</a>
<div style="display: block;" id="div_1"><a href="showthought.php?d=13&&m=12&&y=2004">13th December 2004</a><br />
Tony Dobson suggests how you can survive a Christmas dip at work.</div>
<div style="display: none;" id="div_2"><a href="showthought.php?d=3&&m=1&&y=2000">3rd January 2000</a><br />
Neil Taylor heralds a new millennium.</div>
<div style="display: none;" id="div_3">Coming soon!</div>
Toneboy
Forum Contributor
Posts: 102 Joined: Wed Jul 31, 2002 5:59 am
Location: Law, Scotland.
Contact:
Post
by Toneboy » Sat Dec 18, 2004 2:32 pm
Works a treat, thanks.