临时更改多个 href 属性

Question

我需要暂时禁用多个链接并为它们提供新功能。它们是导航菜单中的链接，在移动设备上成为显示下拉菜单的按钮，而不是将用户带到页面。（这很好，因为他们将用户带到的页面有点多余）

示例：

<div>
    <ul>
        <li>
            <a href="xyz"> FIRST LINK </a>
        </li>
        <li>
            <a href="zyx"> SECOND LINK </a>
        </li>
        <li>
            <a href="abc"> THIRD LINK </a>
        </li>
    </ul>
</div>

所以我打算做一个函数，在window小于900px的时候，临时把href属性改成“#”。那么如果再宽一点，函数就不会运行.

这很容易，但挑战在于，当我将大小时从 < 900px 调整为 > 900px 时，原始 href 属性值不会恢复。我怎样才能恢复它们？

p.s。这是 wordpress 菜单的一部分，因此您必须考虑它的动态命名等。

谢谢！

Answer 1

<div>
    <ul>
        <li>
            <a href="xyz" class="navg" data-hrf=""> FIRST LINK </a>
        </li>
        <li>
            <a href="zyx" class="navg" data-hrf=""> SECOND LINK </a>
        </li>
        <li>
            <a href="abc" class="navg" data-hrf=""> THIRD LINK </a>
        </li>
    </ul>
</div>


<script type="text/javascript">

 $(document).ready(function(){

     function size_changed(){
         var width = $(window).width();
         if(width <= 900){

              // less then 900 so remove href with #
              $('.navg').each(function(){
                   var old = $(this).attr('href');
                   $(this).attr('data-hrf', old);   // store real href in data-hrf attribute
                   $(this).attr('href', '#');
              }); 

         }else{

             // more then 900 so restore
             $('.navg').each(function(){
                   var old = $(this).attr('data-hrf');
                   if(old != "" ) $(this).attr('href', old);  
             }); 

         }  // if __width

    } // will call everytime when you change the screen size

    // Now set this function as width change handler

   $(window).resize(function() {

         size_changed();

   });            

   // What if screen size is 500px alredy so call this funciton at starting the page
   size_changed();

 }); // document _ready
</script>

谢谢 :) ，可能会有一些拼写错误，因为我没有测试这段代码，但它会工作；）

临时更改多个 href 属性

Temporarily change multiple href attributes

wordpress

jquery

attributes

replace

restore