Question

这是我的项目：jsFiddle

在菜单栏中有3个链接，打开3个不同的子菜单，每个子菜单包含一个关闭链接。

当链接悬停时，它们会显示页面URL。为避免这种情况，我想将（链接）更改为<input>按钮。

Html：

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="menu_f_si">
    <div id="middle_popup">
        <h1>Middle</h1>
        <p>Bla bla bla bla bla</p>
        <a href="#middle">Close</a>
    </div>
    <div id="right_popup">
         <h1>Right</h1>
         <p>Bla bla bla bla bla</p>
         <a href="#right">Close</a>
    </div>
    <div id="left_popup">
         <h1>Left</h1>
         <p>Bla bla bla bla bla</p>
         <a href="#left">Close</a>
    </div>
</div>
<div id="menu_f_li">
    <ul id="menu_f_ll">
        <li><a href="#left">left menu</a></li>
        -
        <li><a href="#middle">middle menu</a></li>
        -
        <li><a href="#right">right menu</a></li>
    </ul>
</div>

jQuery：

$(document).ready(
 function()
 {$('#menu_f_ll li a').click(
   function(e)
   {e.preventDefault();
    animateSlider(this.hash);
   }
  );
  $('#menu_f_si div a').click(
   function(e)
   {e.preventDefault();
    animateSlider(this.hash);
   }
  );
  function animateSlider(hash)
  {if (!$('#menu_f_si div.open').length)
   {if (hash == '#middle') {openPopup(hash);}
    if (hash == '#right') {openPopup(hash);}
    if (hash == '#left') {openPopup(hash);}
   }
   else
   {if (hash == '#middle') {openAndClose(hash)}
    if (hash == '#right') {openAndClose(hash)}
    if (hash == '#left') {openAndClose(hash)}
   }
  }
  function openPopup(hash)
  {$(hash + '_popup').slideToggle().addClass('open');}
  function openAndClose(hash)
  {if ($(hash + '_popup').hasClass('open'))
   {$($(hash + '_popup')).slideToggle().removeClass();}
   else
   {$('#menu_f_si div.open').slideToggle().removeClass();
    $(hash + '_popup').slideToggle().addClass('open');
   }
  }
 }
);

我已经能够在其他示例中这样做，但在这种情况下，jQuery使用（哈希），我似乎无法模仿<input>。

所以我的问题是：我可以将（链接）更改为<input>按钮吗？（如何）

感谢您抽出宝贵时间帮助我：）

Answer 1

只需为href使用一些自定义属性而不是a。由于您使用的是href，因此浏览器决定添加工具提示，但如果您使用了menuid之类的自定义名称，而不是在javascript中使用this.hash，请使用$(this).attr('menuid');

对于JavaScript：

animateSlider($(this).attr('menuid'));

而不是

animateSlider(this.hash);

和HTML：

<li><a menuid="#left">left menu</a></li>

而不是

<li><a href="#left">left menu</a></li>

这将消除浏览器工具提示。您需要添加一些CSS来替换手形光标：cursor: pointer;到a。

请参阅此JSFiddle

Answer 2

我已更新小提琴：http://jsfiddle.net/Ha8Gh/7/删除所有链接。

使用数据属性打开菜单，使用类而不是元素来绑定点击事件。

使用CSS，您可以使用cursor: pointer表示li和近距离是可点击的。

Answer 3

修改了您的代码，

检查一下：

$('#menu_f_ll li input').click( //change here

function (e) {
    e.preventDefault();
    animateSlider($(this).attr('tabid')); //change here
});
$('#menu_f_si div input').click( //change here

function (e) {
    e.preventDefault();

    animateSlider($(this).attr('tabid')); //change here
});

<强> DEMO

jQuery如何用输入按钮替换我的链接

3 个答案: