Reputation: 1131
I am just delving into using jQuery and I want to start off by using good coding logic. I am developing an upload site where users can select "upload from computer" or "upload from url". I have two links above the content where users can choose to upload from their computer or from a url, and I want the content to change with jQuery (with some effects) when the user makes their choice.
Demo of what I want: http://imgkk.com/
In the content box where it says Upload: Images URL NFO
, I want my content to slide like that.
I know how to accomplish this, but I'm not sure if its the correct way. I was going to check which content is visible when the user clicks the link and act accordingly, is this the best way?
Thanks.
EDIT: In response to someones answer:
$(".upload-options a").click(function(e){
var id = $(this).attr('href'),
$target = $(id);
alert($target);
if(!$target.is(':visible')){
// Show $target here since it is not currently visible
alert('Show: ' + $target);
}
});
Markup:
<p class="upload-options">
<a href="#normal-upload" class="normal">Normal upload</a>
<a href="#url-upload" class="url">URL upload</a>
</p>
<div id="normal-upload">
// normal upload stuff
</div>
<div id="url-upload">
// url upload stuff
</div>
Cheers!
Upvotes: -1
Views: 384
Reputation: 66221
I normally follow a pattern like this:
<div id="links">
<a href="#computer">Computer</a>
<a href="#url">URL</a>
</div>
<div id="panes">
<div id="computer">
</div>
<div id="url">
</div>
</div>
And then the jQuery:
$(function(){
$("#links a").click(function(e){
var id = $(this).attr('href'),
$target = $(id);
if(!$target.is(':visible')){
// Show $target here since it is not currently visible
}
e.preventDefault();
})
});
Upvotes: 1