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

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 <div class='.1'>, 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 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

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

Answer 4

You need to add the namespace $("a").attr("xlink:href", "#123");

Answer 5

If your teg in iframe , you can't do anything by jquery try do something like this console.log($(".1").html()); and you will see null