0

これが私のプロジェクトです: 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>ボタンに変更できますか? （そしてどのように）

私を助けるために時間を割いてくれてありがとう:)

4

3 に答える 3

1

の代わりにカスタム属性を使用するだけhrefですa。を使用しているため、ブラウザーはツールチップを追加することを決定しますが、javascript で使用する代わりに や のhrefようなカスタム名を使用した場合は、 を使用します。menuidthis.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>

これにより、ブラウザのツールチップがなくなります。cursor: pointer;ハンド カーソルを置き換える CSSをsに追加する必要がありますa。

このJSFiddleを参照してください

于 2013-10-08T06:07:32.867 に答える
0

あなたのコードを変更した、

これをチェックして ：

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

デモ

于 2013-10-08T06:06:49.017 に答える