Why don't you want do this "without naming ids and classes"?
My recommendation would be to use something like this:
$(function() {
var targets = $('[EMAIL PROTECTED]');
if ( !targets.length ) return;
var firstTarget = targets[0];
var pageLinks = $('[EMAIL PROTECTED]"#"]');
targets
.hide()
.each( function() {
var target = $(this);
function showTarget() {
targets.hide();
target.show();
return false;
}
$(pageLinks)
.filter('[EMAIL PROTECTED]"#' + this.id + '"]')
.click( showTarget );
if ( this == firstTarget )
showTarget.apply( firstTarget );
});
});
You use it like this:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="hashShow.js"></script>
<title>Test</title>
</head>
<body>
<p><a href="#section1">Show "Section 1"</a></p>
<p><a href="#section2">Show "Section 2"</a></p>
<div class="hashShow" id="section1">
<h1>Section 1</h2>
</div>
<div class="hashShow" id="section2">
<h1>Section 2</h2>
</div>
</body>
</html>
There's also an added advantage that should JavaScript be not
available the links will still "work".
I'll be putting this into a more flexible plugin format a little
later. If anyone's interested let me know.
Karl Rudd
On 5/16/07, [EMAIL PROTECTED] d <[EMAIL PROTECTED]> wrote:
Hi there, I just started to working on jQuery and am finding it
extremely easy to use. However I've been trying to find a solution to
a simple navigation problem here..
My markup has a list with a few 'li' items. So for each click on a
list item it would show the respective div container and hide the
rest...
<!-- List Menu -->
<div id="dropbox">
<ul>
<li>Cash</li>
<li>Personal Assets</li>
<li>Certificates of Deposit</li>
</ul>
</div>
<!-- Div Containers -->
<div class="formcash">
<h2>Cash</h2>
</div>
<div class="formpersonal">
<h2>Personal Assets</h2>
</div>
<div class="formdeposit">
<h2>Certificates of Deposit </h2>
</div>
Can I some how do the toggle without naming ids and classes?
Any ideas people?
