Question

I have a menu that changes and I want to show content in the DIV id=”main_content” based on the link associated with the item selected in DIV class=”items”

Here is the jQuery code I am using (edited)

<script type="text/javascript">
$(document).ready(function(){
    $(".items a").click(function(e){
        e.preventDefault(); 
        $("#main_content").load($(this).attr("href"));
    });
});

</script>

This code seems logically correct and I have searched extensively before posting here. This question/post was one of the most helpful in constructing the code: Clicking a link display it in Different Div on Same Page

When the link is clicked it opens in a new tab. So my question is, why isn’t this working?

I am open to other suggestions besides jQuery. Any help would be greatly appreciated.

Thanks!

EDIT:

OK, so after some trial and error I found that another script was causing the problem. I have the script below in use to make the entire DIV a clickable link.

<script type="text/javascript">
 $(document).ready(function(){ 
  $(".items").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
  })
 });
</script>

Is there anyway I can use both scripts together?

Answer 1

Yes that code seems right( without looking at the markup). On a side note you could just return false; if you would like to both prevent the default action and stop the event from propagating. I would suggest you only e.preventDefault() unless you need to really also stop the event from propagating.