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>

所以我计划在窗口小于900px时暂时将href属性更改为“＃”。然后，如果它更宽，则该函数不会运行。

这很容易，但挑战是当我从＆lt; 900px到＆gt; 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属性

1 个答案: