1

私のHTMLコードは次のようになります。

<ul>
    <li><a href="#link1">Link 1</a></li>
    <li ><a class="active" href="http://google.com">Link 2</a></li>
    <li><a href="asdasdasd">Link 3</a></li>
</ul>

そして、ホバーとa.class="active"にブロック要素を追加する必要があります

要素はスパンである必要があります。たとえば、次のようになります。

<ul>
    <li><a href="#link1"><span class="arrow"></span>Link 1</a></li><!-- hovering this link -->
    <li ><a class="active" href="http://google.com"><span class="arrow"></span>Link 2</a></li>
    <li><a href="asdasdasd">Link 3</a></li>
</ul>

jQueryを介してそのようなタスクを実行する方法は？

4

3 に答える 3

2

.wrapInner()役立つjQueryメソッドを見てください。

また

<script type="text/javascript">

    $(function()
    {
        $('ul li').each(function(){
            var text = $(this).find('a').text();
            $(this).find('a').html('<span class="arrow"></span>'+text);
        });     
    });

</script>

<ul>
    <li><a href="#link1">Link 1</a></li>
    <li ><a class="active" href="http://google.com">Link 2</a></li>
    <li><a href="asdasdasd">Link 3</a></li>
</ul>

とhover使用のために

$('ul li a').hover(function()
{
   $('ul li').find('a').removeClass('active');
   $(this).addClass('active');
});

上記のコードが行うことは、削除active classしhoveてホバーしたに追加することDOMです。

于 2013-02-28T12:25:09.960 に答える
2

<span>たとえば、要素を作成し、最初に作成した方がよいでしょうdisplay:none。その後、jQueryを使用すると、次のように単純にshow()andを使用できます。hide()

if specific element is being hovered over:
   $("#insertedSpan").show();
   $(this).find('a').html('<span class="arrow"></span>');
else
   $("#insertedSpan").hide();
于 2013-02-28T12:26:08.243 に答える
0

まず、「li」の位置を「relative」に設定する必要があります。次に、表示を非表示にしてを追加します。次に、要素にカーソルを合わせて、jqueryでブロックするようにdisplayを設定します。そして、スパン位置は「絶対」でなければならないことを忘れないでください。

于 2013-02-28T12:31:14.070 に答える