活动链接，javascript css

Question

<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 页，而不是首页）Click here to see website.

“活动功能不起作用。当您在特定页面时，该页面的导航项应该处于活动状态......现在它不起作用。 - 这样你就可以看到你在哪里。 "

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;
}

谢谢:-)

Answer 1

在您的网站上，我收到了 $ 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 包含之后。