another very helpful method would be identify your links all with one
class, your divs all with one class. This helps make use of CSS along
with jQuery.
HTML
<a href="" class="myLink"> text</a>
<a href="" class="myLink"> text1</a>
<a href="" class="myLink"> text2</a> // etcetera
<div class="myDiv visibleDiv">text</div> /// added an
extra class to the visible div, easy to hide this way, will see in
jQuery and CSS
<div class="myDiv">text1</div>
<div class="myDiv">text2</div> // etcetera
jQuery
$("a.myLink).click(function() {
var linkIndex=$("a.myLink).index(this) /// determines the
index of the link you click--- starts at zero for first one
$(".visibleDiv").hide().removeClass("visibleDiv"); //
only ever have one div with this class so hide the whole class ///
don't really need the hide()-CSS will do it for you
$(".myDiv").eq(linkIndex).addClass("visibleDiv").show() // give
it the visibleClassName the css alone will show the div without needing
the show() function, same index as link,
});
CSS
.myDiv {display:none}
.myDiv.visibleDiv {display:block}
Your links can now be anywhere within the HTML and don't have to be
within any shared containers of the div, but if they are it works the
same.
Using classes can simplify a lot of code as well as make CSS easy to
aid what your objectives are
Michel Belleville wrote:
Let's get up to speed a little then :
$('#div1, #div2, #div3, #div4, #div5').click(function() { // we can use
multiple selectors in one selection, just like in css, and we can give
the click callback to all of them at once too
$('#div1, #div2, #div3, #div4,
#div5').hide(); // we can also hide them all at once, in fact most
jQuery's functions may be used on a whole selection at once
$(this).show(); // we've hidden all of them, but we know which one
we've clicked on, it's been bound to this ; though this is just the
dumb dom element, and we need to wrap it in sweet sweet jQuery
});
Though I'd suggest not to hide them if you want to click them after,
let's see how to do this.
Now let's assume you put a div inside each of your divs to handle the
content, and put any other element to get the actual click. Like that :
<div id="div1">
<a href="">click handler
for div1</a>
<div>
any content you like
</div>
...
Now we can do something like this :
$('#div1 > a, #div2 > a, #div3 > a, #div4 > a, #div5 >
a').click(function() { // now we select the direct child link in each
div to handle the click
$('#div1 > div, #div2 > div,
#div3 > div, #div4 > div, #div5 > div').hide(); // we hide all
the contents
$(this).closest('div').children('div').show(); // closest takes the
closest element (parent or self) matching the selector, children takes
the children of an element matching the selector
});
Hope this gives you a good foretaste of things to come with jQuery ^^
Michel Belleville
2009/11/27 Andre Polykanine <an...@arthaelon.net>
Hello
ghostrunner and all,
There are two methods: show() and hide() respectively.
So you just show the necessary div and hide the four others, like
this:
$(function () {
$("#div1").click (function (event) {
$(this).show();
$("#div2").hide();
$("#div3").hide();
$("#div4").hide();
$("#div5").hide();
});
});
I know it's not so handy (I'm also rather new in jQuery). Maybe
someone will suggest you something else...
--
With best regards from Ukraine,
Andre
Skype: Francophile; Wlm&MSN: arthaelon @ yandex.ru; Jabber:
arthaelon @ jabber.org
Yahoo! messenger: andre.polykanine; ICQ: 191749952
Twitter: m_elensule
----- Original message -----
From: ghostrunner < p...@rasmusa.dk>
To: jQuery (English) < jquery-en@googlegroups.com>
Date: Friday, November 27, 2009, 7:40:17 PM
Subject: [jQuery] Switch between five divs
Hey.
JQuery is pretty new to me.
I have five <div> on my site.
Only one of them should be visible at one time.
Next to det div I have 5 links.
i would like to be able to switch between them by cliking on a link
(there is a link for every div).
I can't figure out how to do this.
|
