jQuery attr href, why isn't it working?

Question

I thought the following line of code should work fine: $(".1").attr('href', '#Home'); Right?

But why isn't it working when I integrate it with another jQuery script?

$(window).bind("load", function() {
    $('.1').click(function() {
     $('.1').removeClass('tab1');
     $('.2').removeClass('active2');
     $('.3').removeClass('active3');
     $('.4').removeClass('active4');

     $('.1').addClass('active1');

     $('.2').addClass('tab2');
     $('.3').addClass('tab3');
     $('.4').addClass('tab4');

     $('#PortfolioMainContainer:visible').fadeOut("slow",function(){
      $('#TextContent').load('Home.html', function() {
        $(this).fadeIn("slow")
      });
      return false;
     }); 

     if(!$(".1").hasClass("ActiveTab1")) {
      $(".1").attr('href', '#Home');
      $('#TextContent:visible').fadeOut("slow",function(){
       $('#TextContent').load('Home.html', function() {
        $(this).fadeIn("slow")
       });
       return false;
      });
     }
     $(".1").addClass("ActiveTab1");

     $(".2").removeClass("ActiveTab2");
     $(".3").removeClass("ActiveTab3");
     $(".4").removeClass("ActiveTab4");
    });
});

The thing I want to get clear is when you click on the div with the class .1 then the URL has to change to http://www.websiteurl.com/#Home

Does anybody have an idea how to get it working?

Answer 1

You have to append the current location to the href attribute.

Answer 2

You can use document.URL to get the current location, so

$(".1").attr('href', document.URL + '#Home');

The thing is that document.URL will get the url with pounds and everything, so if you're on example.com/#work, docuement.URL would return 'example.com/#work'. So you might want to do some checking, or if you know that you are on a static url for this script, you can just hardcode the url.

One other thing, I can see that you are adding the class ActiveTab1 after checking for it, so it shouldn't go into that portion of the code, unless it already have that class.

Answer 3

I tested the following statements and it actually works.

        $(function() {
      $("a").attr("href", "#123");
     });

And if I click on any link, the location actually attached #123 at the end with no doubt.

I think your problem could be, your ".1" is not attaching to an anchor object. In HTML spec, only hyperlink (and some not relevant html tags) are having "href" attribute. That means, for example, your .1 is actually a , then, even you put href attribute to it, it would not have any default behavior acting as "hyperlink". In this case, you should programattically navigate to designated url like:

$(".1").click(function(){
    window.location = "current/url" + "#home";
});

Answer 4

I'm trying to solve something similar and would really appreciate some help. I've got a div with a load of anchors in it, and images within those anchors. I want to run some jquery that modifies the href of those anchors to be based on the href of the image it contains. So in a nutshell, I need to know what to put in the place of the ??? below, where the ??? represents the images URL...

$(".MyClass").attr("href", "javascript:MyFunction('???')");

...although it's clearly not right, my thoughts were something along the lines of:

$(".MyClass").attr("href", "javascript:MyFunction('" + $(this + " > .ImageClass")[0].attr("href") + "')");

Can anybody spare the time to help me? Thanks in advance! Chris