-1 
<script type="text/javascript">
            $(document).ready(function(){
            $('#info a.tooltip').addClass('active');
            });
</script>

<ul class="ca-menua">
                    <li><a href="#home" class="tooltip"><span class="ca-icona">O</span></a></li>
                    <li><a href="#info" class="tooltip"><span class="ca-icona" id="info">e</span></a></li>
                    <li><a href="#komp" class="tooltip"><span class="ca-icona">S</span></a></li>
                    <li><a href="#cases" class="tooltip"><span class="ca-icona">F</span></a></li>
                    <li><a href="#kont" class="tooltip"><span class="ca-icona">@</span></a></li>
                </ul>

a.tooltip.active #info  {
    color: #f3cb12;
    font-size: 50px;
}

アクティブリンクエフェクトを実行しようとしていますが、正しく表示できないようです。効果はこのリンクにあります（フロントページではなく2ページから）ここをクリックしてWebサイトを表示します。

「アクティブな機能は機能しません。特定のページにいるときは、そのページのナビゲーションアイテムがアクティブになっているはずです。現在は機能していません。これにより、現在地を確認できます。」

Javascript：

<script type="text/javascript">
$(function() {
    $('a.tooltip').click(function(e) {
        var $this = $(this);
        $(".ca-menua").load($this.attr('href'));
        $('a.tooltip').removeClass('active');
        $(this).addClass('active');

        // prevent default link click
        e.preventDefault();
    })
});</script>

HTML：

    <ul class="ca-menua">
               <li><a href="#home" class="tooltip"><span class="ca-icona">O</span></a></li>
               <li><a href="#info" class="tooltip"><span class="ca-icona">e</span></a></li>
               <li><a href="#komp" class="tooltip"><span class="ca-icona">S</span></a></li>
               <li><a href="#cases" class="tooltip"><span class="ca-icona">F</span></a></li>
               <li><a href="#kont" class="tooltip"><span class="ca-icona">@</span></a></li>
</ul>

CSS：

li a.tooltip.active .ca-icon {
    color: #f3cb12;
    font-size: 50px;
}

ありがとう ：-）

4

1 に答える 1

0

あなたのサイトでエラーが発生しました$ is not defined。これは通常、コードが外部にある$('document').ready()か、jQueryが適切に含まれていないことを意味します。

実際、コンソールでコードを手動で実行すると

$('a.tooltip').click(function(e) {
    var $this = $(this);
    $(".ca-menua").load($this.attr('href'));
    $('a.tooltip').removeClass('active');
    $(this).addClass('active');

    // prevent default link click
    e.preventDefault();
})

目的の効果が機能します（黄色のアイコンが縮小します）。

jQueryインクルードの後に​​そのスクリプトを配置する必要があります。

于 2012-06-14T20:43:20.170 に答える