Add attribute not working in jquery

Question

I need to add an href attribute to a element using jqueny when window size is less than 768 pixel

        <ul class="menu-link">
            <!--<li><a class="" href="#">HOME</a></li>-->
            <li><a id="#about-us" >ABOUT US</a></li>
            <li><a id="#contact" >CONTACT</a></li>
        </ul>

jQuery(document).ready(function ($) {
      var windowSize = $(window).width(); // 
            if (windowSize < 768) {
                //add attr
                $("#about-us").attr("href", "#about-us");
                $("#contact").attr("href", "#contact");
    }
});

It is not working for some reason am i doing something wrong

also you have id="#about-us" and id="#contact". It should just be id="about-us" and id="contact" — pattmorter
– pattmorter, Commented Jul 25, 2014 at 18:15
Using media query then i have to repeat whole set of html code twice. for this reason i want to do it with jquery. — Learning
– Learning, Commented Jul 25, 2014 at 18:18
"It is not working for some reason am i doing something wrong" Yeah, i'm sure that's why it isn't working. — user400654
– user400654, Commented Jul 25, 2014 at 18:31

dave · Accepted Answer · 2014-07-25 18:24:06Z

1

First of all you need to remove the # from the ids:

<li><a id="#about-us" >ABOUT US</a></li>
<li><a id="#contact" >CONTACT</a></li>

Should be

<li><a id="about-us" >ABOUT US</a></li>
<li><a id=contact" >CONTACT</a></li>

Next, you probably want to run that on window.resize as well:

$(function() {
  $(window).on('resize', function() {
    var add_remove = $(window).width() < 768; 
    $("#about-us").attr("href", add_remove ? "#about-us" : "");
    $("#contact").attr("href", add_remove ? "#contact" : "");
  });
  $(window).trigger('resize');
});

answered Jul 25, 2014 at 18:24

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Montagne · Accepted Answer · 2014-07-25 18:26:33Z

1

to show what @pattmorter is pointing out

HTML:

<ul class="menu-link">
        <!--<li><a class="" href="#">HOME</a></li>-->

        <!-- remove the # from the ids -->
        <li><a id="about-us" >ABOUT US</a></li>
        <li><a id="contact" >CONTACT</a></li>
    </ul>

JS:

jQuery(document).ready(function ($) {
  var windowSize = $(window).width(); // 
        if (windowSize < 768) {
            //add attr
            $("#about-us").attr("href", "#about-us");
            $("#contact").attr("href", "#contact");
        }
});

edited Jul 25, 2014 at 18:26

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

answered Jul 25, 2014 at 18:18

mrpotocnik

1,1511 gold badge10 silver badges16 bronze badges

2 Comments

Learning Over a year ago

Thanks, I just made a stupid mistake... didn't notice that i am adding # with id=#about-us.. stress of overwork..

mrpotocnik Over a year ago

I think we have all been there... Cheers!

Collectives™ on Stack Overflow

Add attribute not working in jquery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related