jQuery的我怎麼能代替我的鏈接與輸入按鈕

這裏是我的項目：jsFiddle

在菜單欄有3個環節，這將打開3個不同的子菜單，每個包含密切的聯繫。

鏈接懸停後，它們顯示頁面url。爲了避免這種情況，我想將（鏈接）更改爲<input>按鈕。

HTML：jQuery的我怎麼能代替我的鏈接與輸入按鈕

<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>按鈕？（以及如何）

感謝您抽出時間來幫我:)

來源

2013-10-08 Danny R. Thillemann

這是使用一個'按鈕'，但應該給你一個你需要改變以做你想做的事情的想法。 http://jsfiddle.net/Ha8Gh/3/ – sberry

它用於隱藏網址，但關閉按鈕不起作用。數據哈希像id？哪裏只能有一個？ –

_「當鏈接懸停時，它們顯示頁面url。」_ - 以及這是一個問題？ – CBroe

已修改了代碼，

檢查：

$('#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

來源

2013-10-08 06:06:49

這正是我一直在尋找的！但它是有效的html在輸入內使用href？這可能聽起來很愚蠢:) –

你可以改變任何id說tabid，等待，將chage和更新爲你 –

尼斯..謝謝你的專業知識！非常感激！！！ –

剛使用一些自定義屬性而不是href作爲a s。由於您使用的是href，因此瀏覽器決定添加工具提示，但是如果您在JavaScript中使用了一些自定義名稱（如menuid）而不是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 s。

看到這個JSFiddle

來源

2013-10-08 06:07:32

如果我理解正確，那麼鏈接現在使用（製作）屬性，這是非常好的！ –

@ DannyR.Thillemann，關鍵是不要使用'href'屬性，因爲它是一個特殊的屬性，告訴瀏覽器這是一個新頁面的鏈接。 –

我明白了......謝謝你爲我拼寫:) –

我已經更新了小提琴：http://jsfiddle.net/Ha8Gh/7/刪除所有鏈接。

獲取要使用數據屬性打開的菜單，並使用類而不是元素來綁定點擊事件。

使用CSS，您可以使用cursor: pointer來指示li和關閉範圍是可點擊的。

來源

2013-10-08 06:10:59 Karine

不錯的選擇！ –

jQuery的我怎麼能代替我的鏈接與輸入按鈕

回答

相關問題