添加属性在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

Answer 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");
        }
});

Answer 2

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');
});