I have 4 divs next to each other, each containing a link. I want to dynamically switch the id of "current" around,
for example.
<div name="1" id="current">
<a>
link
</a>
</div>
<div name="2">
<a>
link
</a>
</div>
<div name="3">
<a>
link
</a>
</div>
<div name="4">
<a>
link
</a>
</div>
How can I dynamically change which one is the current one when the link is clicked?
current on each div - David Nguyen 2012-04-03 20:25
$('selector_string').doStuff(). The "selector strings" usually look a lot like CSS rules. For example, div.tab means "all div elements that have the class tab. - jnylen 2012-04-03 20:59
Don't do this. Element IDs should not change based on the state of the web page. Use another attribute instead, like class="current".
If you're using jQuery, which I highly recommend, you can do this as follows:
$('div.tab a').click(function() {
$('div.tab').removeClass('current');
$(this).closest('div.tab').addClass('current');
return false;
});
To make this code work, you need to add class="tab" to your <div> elements. This is a good idea especially if you have other <div> elements on the page. If you do this, the current tab would then have an attribute class="tab current". jQuery knows how to handle this properly.
Also, I would consider using the id attribute instead of the name attribute, and giving your <a> tags a href attribute so that browsers will show them as clickable elements. For example:
<div id="tab1" class="tab">
<a href="#">tab 1</a>
</div>
Here's an example of how to include this script (assuming that you have JQuery saved as a file jquery.js in the same directory as the HTML page):
<!DOCTYPE html>
<html>
<head>
<title>Testing jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('div.tab a').click(function() {
$('div.tab').removeClass('current');
$(this).closest('div.tab').addClass('current');
return false;
});
});
</script>
</head>
<body>
<div id="tab1" class="tab current">
<a href="#">tab1 link</a>
</div>
<div id="tab2" class="tab">
<a href="#">tab2 link</a>
</div>
<div id="tab3" class="tab">
<a href="#">tab3 link</a>
</div>
<div id="tab4" class="tab">
<a href="#">tab4 link</a>
</div>
</body>
</html>
A couple of notes about that:
Really, it's better to put your site's JavaScript in a separate file and include it with <script type="text/javascript" src="filename.js"></script>, but including it "inline" like I've done is fine for small projects or just playing around with stuff.
The $(function() { ... }); is shorthand for $(document).ready(function() { ... });, which means the code inside that block will be executed as soon as the browser has finished loading the HTML document structure. For example, you don't want your JavaScript to execute before the browser has finished downloading the rest of the page.
$('div.tab.current').removeClass('current');
since you only want to remove .current from an element that already has it - Code Junkie 2012-04-03 20:46
<script> tag. I've updated my answer with an example - jnylen 2012-04-03 21:32
return false; in the JavaScript code. I don't think that's very useful though, since the link will load a new page right when you click on it. (Use <a target="_blank"> to make a link open in a new window. - jnylen 2012-04-03 21:49
you can change everything but the id !
class="current" better for two reasons: you probably don't really need to track the current ID value, and using a class makes it really easy to apply CSS rules - jnylen 2012-04-03 20:41